1. 程式人生 > >Animation 動畫介紹和實現

Animation 動畫介紹和實現


文章出處 : http://www.cnblogs.com/yc-755909659/p/4290114.html

1.Animation 動畫型別

Android的animation由四種類型組成:

XML中

alph 漸變透明度動畫效果
scale 漸變尺寸伸縮動畫效果
translate 畫面轉換位置移動動畫效果
rotate 畫面轉移旋轉動畫效果

 

 

 

 

 

JavaCode中

AlphaAnimation 漸變透明度動畫效果
ScaleAnimation 漸變尺寸伸縮動畫效果
TranslateAnimation 畫面轉換位置移動動畫效果
RotateAnimation 畫面轉移旋轉動畫效果

 

 

 

 

 2.Android動畫模式

Animation主要有兩種動畫模式:

一種是tweened animation(漸變動畫)

XML中 JavaCode
alpha AlphaAnimation
scale ScaleAnimation

 

 

 

一種是frame by frame(畫面轉換動畫) 


XML中 JavaCode
translate TranslateAnimation
rotate RotateAnimation

 

 

 

3.如何在XML檔案中定義動畫

步驟如下:

①新建 Android 專案

在res目錄中新建anim資料夾

在anim目錄中新建一個my_anim.xml(注意檔名小寫)

④在 my_anim.xml 加入動畫程式碼

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha />
    <scale />
    <translate />
    <rotate />
</set>
複製程式碼

 

4.Android動畫解析--XML


4.1 alpha 漸變透明度動畫效果

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <!--
     透明度控制動畫效果 alpha
        浮點型值:
            fromAlpha 屬性為動畫起始時透明度
            toAlpha   屬性為動畫結束時透明度
            說明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之間的float資料型別的數字
        
        長整型值:
            duration  屬性為動畫持續時間
            說明:     
                時間以毫秒為單位

    -->
</set>
複製程式碼

 

4.2 scale 漸變尺寸伸縮動畫效果

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="1000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.4"
        android:toYScale="1.4" />

</set><!--
     尺寸伸縮動畫效果 scale
       屬性:interpolator 指定一個動畫的插入器
        在我試驗過程中,使用android.res.anim中的資源時候發現
        有三種動畫插入器:
            accelerate_decelerate_interpolator  加速-減速 動畫插入器
            accelerate_interpolator        加速-動畫插入器
            decelerate_interpolator        減速- 動畫插入器
        其他的屬於特定的動畫效果
      浮點型值:
         
            fromXScale 屬性為動畫起始時 X座標上的伸縮尺寸    
            toXScale   屬性為動畫結束時 X座標上的伸縮尺寸     
        
            fromYScale 屬性為動畫起始時Y座標上的伸縮尺寸    
            toYScale   屬性為動畫結束時Y座標上的伸縮尺寸    
        
            說明:
                 以上四種屬性值    
    
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
        
            pivotX     屬性為動畫相對於物件的X座標的開始位置
            pivotY     屬性為動畫相對於物件的Y座標的開始位置
        
            說明:
                    以上兩個屬性值 從0%-100%中取值
                    50%為物件的X或Y方向座標上的中點位置
        
        長整型值:
            duration  屬性為動畫持續時間
            說明:   時間以毫秒為單位

        布林型值:
            fillAfter 屬性 當設定為true ,該動畫轉化在動畫結束後被應用

-->
複製程式碼

 

4.3 translate 畫面轉換位置移動動畫效果

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="2000"
        android:fromXDelta="30"
        android:fromYDelta="30"
        android:toXDelta="-80"
        android:toYDelta="300" />
    <!--
     translate 位置轉移動畫效果
        整型值:
            fromXDelta 屬性為動畫起始時 X座標上的位置    
            toXDelta   屬性為動畫結束時 X座標上的位置
            fromYDelta 屬性為動畫起始時 Y座標上的位置
            toYDelta   屬性為動畫結束時 Y座標上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時候,
                     預設是以自己為相對參照物             
        長整型值:
            duration  屬性為動畫持續時間
            說明:   時間以毫秒為單位



    -->

</set>
複製程式碼

 

4.4 rotate 畫面轉移旋轉動畫效果

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+350" />
    <!--
     rotate 旋轉動畫效果
       屬性:interpolator 指定一個動畫的插入器
             在我試驗過程中,使用android.res.anim中的資源時候發現
             有三種動畫插入器:
                accelerate_decelerate_interpolator   加速-減速 動畫插入器
                accelerate_interpolator               加速-動畫插入器
                decelerate_interpolator               減速- 動畫插入器
             其他的屬於特定的動畫效果
                           
       浮點數型值:
            fromDegrees 屬性為動畫起始時物件的角度    
            toDegrees   屬性為動畫結束時物件旋轉的角度 可以大於360度   

        
            說明:
                     當角度為負數——表示逆時針旋轉
                     當角度為正數——表示順時針旋轉              
                     (負數from——to正數:順時針旋轉)   
                     (負數from——to負數:逆時針旋轉) 
                     (正數from——to正數:順時針旋轉) 
                     (正數from——to負數:逆時針旋轉)       

            pivotX     屬性為動畫相對於物件的X座標的開始位置
            pivotY     屬性為動畫相對於物件的Y座標的開始位置
                
            說明:        以上兩個屬性值 從0%-100%中取值
                         50%為物件的X或Y方向座標上的中點位置

        長整型值:
            duration  屬性為動畫持續時間
            說明:       時間以毫秒為單位

    -->

</set>
複製程式碼

 

5.如何使用XML中的動畫效果

複製程式碼
public static Animation loadAnimation (Context context, int id) 

//第一個引數Context為程式的上下文    
//第二個引數id為動畫XML檔案的引用
//例子:
myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);
//使用AnimationUtils類的靜態方法loadAnimation()來載入XML中的動畫XML檔案
複製程式碼

 

6.如何使用XML中的動畫效果

複製程式碼
//在程式碼中定義 動畫例項物件
private Animation myAnimation_Alpha;
private Animation myAnimation_Scale;
private Animation myAnimation_Translate;
private Animation myAnimation_Rotate;
    
//根據各自的構造方法來初始化一個例項物件
myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);

myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
             Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

myAnimation_Translate=new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);

myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
               Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
複製程式碼

 

7.Android動畫解析--JavaCode

7.1 AlphaAnimation

① AlphaAnimation類物件定義

private AlphaAnimation myAnimation_Alpha

② AlphaAnimation類物件構造

//第一個引數fromAlpha為 動畫開始時候透明度
//第二個引數toAlpha為 動畫結束時候透明度
AlphaAnimation(float fromAlpha, float toAlpha) 
//說明:0.0表示完全透明,1.0表示完全不透明
myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);

③ 設定動畫持續時間

//設定時間持續時間為 5000毫秒
myAnimation_Alpha.setDuration(5000);

 

7.2 ScaleAnimation

① ScaleAnimation類物件定義

private AlphaAnimation myAnimation_Alpha;

② ScaleAnimation類物件構造

複製程式碼
ScaleAnimation(float fromX, float toX, float fromY, float toY,
           int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) 

//第一個引數fromX為動畫起始時 X座標上的伸縮尺寸    
//第二個引數toX為動畫結束時 X座標上的伸縮尺寸     
//第三個引數fromY為動畫起始時Y座標上的伸縮尺寸    
//第四個引數toY為動畫結束時Y座標上的伸縮尺寸  
/*說明:
                    以上四種屬性值    
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
*/
//第五個引數pivotXType為動畫在X軸相對於物件位置型別  
//第六個引數pivotXValue為動畫相對於物件的X座標的開始位置
//第七個引數pivotXType為動畫在Y軸相對於物件位置型別   
//第八個引數pivotYValue為動畫相對於物件的Y座標的開始位置
myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
             Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
複製程式碼

③ 設定動畫持續時間

//設定時間持續時間為 700毫秒
myAnimation_Scale.setDuration(700);

 

7.3 TranslateAnimation

① TranslateAnimation類物件定義

private AlphaAnimation myAnimation_Alpha;

② TranslateAnimation類物件構造

//第一個引數fromXDelta為動畫起始時 X座標上的移動位置    
//第二個引數toXDelta為動畫結束時 X座標上的移動位置      
//第三個引數fromYDelta為動畫起始時Y座標上的移動位置     
//第四個引數toYDelta為動畫結束時Y座標上的移動位置
TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta) 

③ 設定動畫持續時間

//設定時間持續時間為 2000毫秒
myAnimation_Translate.setDuration(2000);

 

7.4 RotateAnimation

① RotateAnimation類物件定義

private AlphaAnimation myAnimation_Alpha;

② RotateAnimation類物件構造

複製程式碼
RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
            
//第一個引數fromDegrees為動畫起始時的旋轉角度    
//第二個引數toDegrees為動畫旋轉到的角度   
//第三個引數pivotXType為動畫在X軸相對於物件位置型別  
//第四個引數pivotXValue為動畫相對於物件的X座標的開始位置
//第五個引數pivotXType為動畫在Y軸相對於物件位置型別   
//第六個引數pivotYValue為動畫相對於物件的Y座標的開始位置
myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
複製程式碼

② RotateAnimation類物件構造

//設定時間持續時間為 3000毫秒
myAnimation_Rotate.setDuration(3000);

 

8.如何使用Java程式碼中的動畫效果

 使用從View父類繼承過來的方法startAnimation()來為View或是子類View等等新增一個動畫效果

public void startAnimation (Animation animation)

 

9.還是來個栗子吧

9.1 使用XML檔案方式

①效果圖如下:

②在XML檔案中定義動畫,前面已提及

③主介面佈局,這沒啥好說的,很簡單 o(∩_∩)o

④主介面邏輯程式碼,主要就是這個了,控制動畫顯示

複製程式碼
package com.yanis.base;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class AnimationActivity extends Activity implements OnClickListener {
    private ImageView imgPic;
    private Button btnAlpha, btnScale, btnTranslate, btnRotate;
    private Animation myAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        intiView();

        initData();
    }

    /**
     * 初始化元件
     */
    private void intiView() {
        imgPic = (ImageView) findViewById(R.id.imgPic);
        btnAlpha = (Button) findViewById(R.id.btnAlpha);
        btnScale = (Button) findViewById(R.id.btnScale);
        btnTranslate = (Button) findViewById(R.id.btnTranslate);
        btnRotate = (Button) findViewById(R.id.btnRotate);
    }

    /**
     * 初始化資料
     */
    private void initData() {
        btnAlpha.setOnClickListener(this);
        btnScale.setOnClickListener(this);
        btnTranslate.setOnClickListener(this);
        btnRotate.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnAlpha:
            /**
             * 使用XML中的動畫效果 第一個引數Context為程式的上下文 第二個引數id為動畫XML檔案的引用
             */
            myAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnScale:
            myAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnTranslate:
            myAnimation = AnimationUtils.loadAnimation(this,
                    R.anim.translate_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnRotate:
            myAnimation = AnimationUtils
                    .loadAnimation(this, R.anim.rotate_anim);
            imgPic.startAnimation(myAnimation);
            break;

        }
    }
}
複製程式碼

 

9.2 使用Java程式碼方式

博文 遊戲開發基礎(動畫) 中有例項說明,此處不再贅述。

 

10. 用Animation-list實現逐幀動畫

栗子效果圖如下:

步驟如下:

①在res/drawable目錄新增圖片素材

②在drawable資料夾中新增動畫Animation-list幀佈局檔案

複   
 
 </div> 
 <div class=

相關推薦

Animation 動畫介紹實現

文章出處 : http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 動畫型別 Android的animation由四種類型組成: XML中 alph

css3——transition動畫過渡(transition動畫過渡可作用的屬性),animation動畫鋪墊@keyframes動畫關鍵幀

css3動畫優點:開啟GPU加速,不會產生動畫佇列,即頻繁點選按鈕時,不會有多個動畫在等待執行; 1. transition: property duration timing-function delay; 是個複合屬性,包括: transition-property

資料結構之赫夫曼樹的演算法介紹實現

一、基礎知識: (1)最優二叉樹(赫夫曼樹)的介紹: a、路徑長度:從樹中一個結點到另一個結點之間的分支構成這兩個結點之間的路徑,路徑上分支數目稱做路徑長度。 b、樹的路徑長度:從樹根到每一個結點之間的路徑長度之和。上一篇介紹的完全二叉樹就是這種路徑長度最短的二叉樹。 c、

一致性hash介紹實現

http://www.cnblogs.com/zhangshiwen/p/5787232.html , 看了幾篇一致性hash的介紹, 這邊理論講的比較少,但是結合實際例子,容易理解。 mark.像Memcache以及其它一些記憶體K/V資料庫一樣,Redis本身不提供分散式

[Android原始碼分析]L2CAP的bind分析以及psmcid的介紹實現

繼續上文的socke的建立之後,我們自然而然就會想到下面的工作了,沒錯就是bind。 5.6 l2cap的bind分析     按照國際慣例,在建了socket之後,必然會有bind,哈哈~~ i

Animation動畫效果的實現

佈局動畫介紹 佈局動畫和逐幀動畫是由本質的不同的,逐幀動畫是一幀幀圖片組成的,而佈局動畫是漸變動畫,OPhone通過改變UI的屬性(大小、位置、透明度等)來實現動畫效果。 在OPhone顯示系統中,每個view都對應一個矩陣來控制該view顯示的位置,通過不同的方式來改變該控制矩陣就可以實現動

Android四種補間動畫介紹實現

一.Android的animation由四種類型組成:alpha、scale、translate、rotate alpha 漸變透明度動畫效果 scale 漸變尺寸伸縮動畫效果 translate 畫面轉換位置移

螞蟻金服服務註冊中心 MetaServer 功能介紹實現剖析 | SOFARegistry 解析

SOFAStack (Scalable Open Financial  Architecture Stack) 是螞蟻金服自主研

前端動畫實現一——css3的animation、transitiontransform

1.animation:哪個動畫,動畫過程 @keyframes 建立動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。 針對的是一套樣式整體,transition是針對某些屬性所有變化。 .load-border { width: 120px; h

哈夫曼編碼(Huffman coding)的那些事,(編碼技術介紹程序實現)

信號 truct 依次 while 交換 需要 .text 示例 system 前言   哈夫曼編碼(Huffman coding)是一種可變長的前綴碼。哈夫曼編碼使用的算法是David A. Huffman還是在MIT的學生時提出的,並且在1952年發表了名為《

(生產)create-keyframe-animation -動畫實現

pro ase 回調 dir select ots ack nor github 參考:https://github.com/HenrikJoreteg/create-keyframe-animation 實例 var animations = require(‘crea

Core Animation 動畫效果介紹

響應 respond 都是 ans 其他 cnblogs 速度 rep png 在開始之前呢,先了解一下UIView和CALayer大體的區別(重點列舉了以下四點): UIView繼承自 UIResponder,因此UIView 可以處理響應事件,而CALayer繼承自N

【Android界面實現】View Animation 使用介紹

ref 轉載 HA ceshi 很多 ons 伸縮 ets 時間設置 ? ? 轉載請註明出處:http://blog.csdn.net/zhaokaiqiang19

CSS3動畫--animation屬性(nameduration)

animation-name: animation-duration: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

第01講:1 struts2的介紹helloworld實現

struts2介紹: 主頁:http://struts.apache.org/ 在使用者請求和模組化處理方面以及頁面的展現這塊,Struts2 發揮的屌炸天作用; 相對於傳統的 Jsp+Servlet 模式,Struts2 更適合企業級團隊開發,方便系統的維護; 最新版本:2.3.161,新建專案H

使用animation替換background-image實現一些動畫效果

使用animation替換背景圖片來實現動畫效果時,如果直接替換背景圖片來實現,ie是不能相容的 比如: .d-pro1{ width: 641px; height: 767px; backgroun

NET Core微服務之路:自己動手實現Rpc服務框架,基於DotEasy.Rpc服務框架的介紹整合

本篇內容屬於非實用性(拿來即用)介紹,如對框架設計沒興趣的朋友,請略過。   快一個月沒有寫博文了,最近忙著兩件事;    一:閱讀劉墉先生的《說話的魅力》,以一種微妙的,你我大家都會經常遇見的事物,來建議說話的“藝術和魅力”,對於我們從事軟體開發、不太善於溝通

transition過渡 animation 動畫

首先,要知道transition過渡和animation動畫都是實現元素運動的一種方式。區別在於:過渡需要人為觸發,例如點選觸發或者滑鼠懸停觸發,而animation是可以不需要人為觸發。 過渡: 一、2D轉換 1.1轉換方法 translate(x,y);元素從其當前位置移動,根

NET Core微服務之路:自己動手實現Rpc服務框架,基於DotEasy.Rpc服務框架的介紹整合...

本篇內容屬於非實用性(拿來即用)介紹,如對框架設計沒興趣的朋友,請略過。  快一個月沒有寫博文了,最近忙著兩件事;    一:閱讀劉墉先生的《說話的魅力》,以一種微妙的,你我大家都會經常遇見的事物,來建議說話的“藝術和魅力”,對於我們從事軟體開發、不太善

第一講:1 struts2的介紹helloworld實現

struts2介紹: 主頁:http://struts.apache.org/ 在使用者請求和模組化處理方面以及頁面的展現這塊,Struts2 發揮的屌炸天作用; 相對於傳統的 Jsp+Servlet 模式,Struts2 更適合企業級團隊開發,方便系統的維護; 最新版本:2