Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> 【Android】21.3 動畫，android21.3動畫

【Android】21.3 動畫，android21.3動畫

編輯：關於android開發

【Android】21.3 動畫，android21.3動畫


分類：C#、Android、VS2015；

創建日期：2016-03-21

一、簡介

Android 提供了以下三種創建動畫的方式：

  • Drawable Animations – 畫板動畫，也叫幀動畫（Frame Animations）。
  • View Animations - 視圖動畫，也叫補間動畫（Tween Animations）。
  • Property Animations – 屬性動畫。從Android 3.0開始提供。

注意：雖然這三種動畫都可用，但只要有可能，都應該優先考慮用屬性動畫來實現。另外，動畫雖然能吸引人，但不要濫用，否則只會適得其反。

1、畫板動畫（Drawable Animations）

Drawable Animations提供了按幀播放的簡單動畫API，在其他實現技術中一般將其稱為幀動畫（Frame Animations）。這種動畫的播放效果非常類似電影或卡通（cartoon）漫畫。

幀動畫是通過順序播放圖片來產生動畫效果的，下圖通過順序播放6張圖片實現一個人跳起來的動畫效果：

控制動畫序列的畫板資源（XML文件）通常保存在應用程序的/Resource/drawable文件夾中，文件中用<animation-list>元素作為根元素，用<item>元素定義每一幀。

例如，在/Resource/drawable/ch2103DrawableAnimDemo.xml文件中定義動畫序列：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/a01" android:duration="100" />

<item android:drawable="@drawable/a02" android:duration="100" />

<item android:drawable="@drawable/a03" android:duration="100" />

<item android:drawable="@drawable/a04" android:duration="100" />

<item android:drawable="@drawable/a05" android:duration="100" />

<item android:drawable="@drawable/a06" android:duration="100" />

</animation-list>

此動畫包含六個幀。其中，a01~a06是圖片文件，android:duration屬性聲明每個幀顯示的時間。定義動畫序列以後，只需要在布局文件中指定該文件，Android就會自動按順序加載和顯示動畫。

2、視圖動畫（View Animations）

在Android系統中，視圖動畫（或者叫補間動畫）有4種表現方式：漸變、縮放、平移、旋轉。利用View動畫能完成一系列諸如位置、大小、不透明度、旋轉等簡單的變化。例如對程序中的某個ImageView實現動畫處理等。

View動畫位於Android.View.Animation命名空間中，在代碼中可通過下面的方法對View對象進行動畫處理：

AlphaAnimation：控制不透明度變化的動畫類

Rotate Animation：控制旋轉的動畫類

ScaleAnimation：控制縮放變化的動畫類

TranslateAnimation：控制平移變化的動畫類

AnimationSet：控制動畫屬性的集合類

動畫變換文件一般保存在/Resources/anim文件夾中。另外，雖然此API是早期版本提供的，但是由於它的簡單性，因此仍然有用。

注意：保存在/Resources/anim文件夾中的XML文件是聲明View動畫的首選辦法，因為這種方式更易於閱讀和維護。該XML文件必須用以下元素之一作為根元素：

  • alpha -淡入或淡出動畫
  • rotate -旋轉動畫
  • scale –縮放動畫
  • translate –平移（水平或垂直運動）
  • set - 動畫容器，可容納一個或多個其他動畫元素

默認情況下，Android會同時應用該XML文件中的所有動畫。要使動畫按指定的順序變化，將android:startOffset屬性設置在上面定義的元素之一即可。

也可以內插器改變動畫速率，如加速、重復、減速等動畫效果：

  • AcclerateInterpolator / DecelerateInterpolator –增加或減少動畫速率
  • BounceInterpolator – 動畫結束時反彈
  • LinearInterpolator – 恆定速率

具體用法見本節示例中的“視圖動畫示例”。在這個例子中，動畫效果是先將圖像沿水平和垂直方向縮放，然後將圖像逆時針旋轉45度同時縮小圖像的大小。

3、屬性動畫（Property Animations）

這種動畫可對任何對象的屬性進行處理（包括View），是首選的執行動畫的方式，即使動畫對象不可見也一樣能對其進行處理。

屬性動畫API的靈活性在於還能將動畫封裝在不同的類中，使代碼共享更加方便。

所有屬性動畫都是通過Animator子類的實例來創建：

  • ValueAnimator – 這是整個屬性動畫API中最重要的類。它會自動計算需要更改的屬性值，該動畫並不是直接修改這些值，而是用事件去更新動畫對象。
  • ObjectAnimator – 對目標對象的某個屬性進行動畫處理。
  • AnimationSet – 此類用於保存動畫集合，程序中利用它可以“同時執行、順序執行、延時執行”這些動畫。

使用動畫是，可能還需要下面的特殊類：

  • IntEvaluator – 計算整數類型的屬性值
  • FloatEvaluator –計算浮點類型的屬性值
  • ArgbEvaluator –計算顏色類型的屬性值

如果正在進行動畫處理的屬性不是float、int或Color，可通過實現ITypeEvaluator接口創建他們自己的計算類型。

（1）ValueAnimator

通過調用下面的方法之一，可獲取得ValueAnimator的實例：

  • ValueAnimator.OfInt
  • ValueAnimator.OfFloat
  • ValueAnimator.OfObject

下面的代碼演示如何將值從 0 到 100進行動畫處理，動畫持續時間為1000毫秒。

ValueAnimator animator = ValueAnimator.OfInt(0, 100);

animator.SetDuration(1000);

animator.Start();

但是，僅有這些代碼還不夠，這是因為雖然執行了動畫但是並沒有將目標更新為新的值，因此還需要引入相關的事件：

MyCustomObject myObj = new MyCustomObject();

myObj.SomeIntegerValue = -1;

animator.Update += (object sender, ValueAnimator.AnimatorUpdateEventArgs e) =>

{

int newValue = (int) e.Animation.AnimatedValue;

// Apply this new value to the object being animated.

myObj.SomeIntegerValue = newValue;

};

（2）ObjectAnimator

ObjectAnimator是ViewAnimator的子類，它將計時引擎和ValueAnimator結合在一起實現動畫。例如：

MyCustomObject myObj = new MyCustomObject();

myObj.SomeIntegerValue = -1;

ObjectAnimator animator = ObjectAnimator.OfFloat(myObj, "SomeIntegerValue”, 0, 100);

animator.SetDuration(1000);

animator.Start();

與前面的代碼相比，這樣做可減少代碼量。

二、示例

1、運行截圖

2、設計步驟

（1）添加圖片

在Drawable文件夾下添加6個圖片（ch2103asteroid01.png~ch2103asteroid06.png），這些圖片用於演示幀動畫的用法。

然後再添加一個ch2103ship.png圖片，該圖片用於演示視圖動畫的用法。

（2）添加ch2103DrawableAnimDemo.xml

在Resources/Drawable文件夾下添加該文件。 

<?xml version="1.0" encoding="UTF-8" ?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@drawable/ch2103asteroid01" android:duration="100" />
  <item android:drawable="@drawable/ch2103asteroid02" android:duration="100" />
  <item android:drawable="@drawable/ch2103asteroid03" android:duration="100" />
  <item android:drawable="@drawable/ch2103asteroid04" android:duration="100" />
  <item android:drawable="@drawable/ch2103asteroid05" android:duration="100" />
  <item android:drawable="@drawable/ch2103asteroid06" android:duration="100" />
</animation-list>

（3）添加ch2103ViewAnimDemo.xml

在Resources/anim文件夾下添加該文件。 

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">

  <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
         android:fromXScale="1.0"
         android:toXScale="1.4"
         android:fromYScale="1.0"
         android:toYScale="0.6"
         android:pivotX="50%"
         android:pivotY="50%"
         android:fillEnabled="true"
         android:fillAfter="false"
         android:duration="700" />

  <set android:interpolator="@android:anim/accelerate_interpolator">
    <scale android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:fillEnabled="true"
           android:fillBefore="false"
           android:fillAfter="true"
           android:startOffset="700"
           android:duration="400" />

    <rotate android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fillEnabled="true"
            android:fillBefore="false"
            android:fillAfter="true"
            android:startOffset="700"
            android:duration="400" />
  </set>
</set>

（4）添加ch2103Main.axml

在Resources/layout文件夾下添加該文件。 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="畫板動畫示例"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/myGray"
        android:layout_marginTop="5dp" />
    <ImageView
        android:src="@android:drawable/ic_menu_gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ch2103_imageView_DrawableDemo"
        android:layout_marginTop="5dp" />
    <TextView
        android:text="視圖動畫示例"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/myGray"
        android:layout_marginTop="5dp" />
    <ImageView
        android:src="@android:drawable/ic_menu_gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ch2103_imageView_ViewDemo"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="5dp" />
    <Button
        android:text="開始"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ch2103_btnViewDemoStart"
        android:layout_gravity="center" />
    <TextView
        android:text="屬性動畫示例（拖放滑動條觀察進度條動畫）"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/myGray"
        android:layout_marginTop="5dp" />
    <FrameLayout
        android:minWidth="25px"
        android:minHeight="35px"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout1"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="5dp">
        <MyDemos.SrcDemos.ch2103MyView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:id="@+id/ch2103myview1" />
    </FrameLayout>
    <SeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ch2103seekBar1"
        android:max="100"
        android:progress="50"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="10dp" />
</LinearLayout>

（5）添加ch2103MyView.cs 

using System;
using Android.Content;
using Android.Views;
using Android.Graphics;
using Android.Util;
using Android.Animation;

namespace MyDemos.SrcDemos
{
    /// <summary>
    /// 演示進度條動畫控制的基本用法
    /// </summary>
    public class ch2103MyView : View
    {
        private const int DefaultHeight = 20;
        private const int DefaultWidth = 120;

        private Paint mNegativePaint;
        private double mPosition = 0.5;
        private Paint mPositivePaint;

        public ch2103MyView(Context context, IAttributeSet attrs)
            : this(context, attrs, 0)
        {
            Initialize();
        }

        public ch2103MyView(Context context, IAttributeSet attrs, int defStyle)
            : base(context, attrs, defStyle)
        {
            Initialize();
        }

        public double CurrentValue
        {
            get { return mPosition; }
            set
            {
                mPosition = Math.Max(0f, Math.Min(value, 1f));
                Invalidate();
            }
        }

        public void SetCurentValue(double value, bool animate)
        {
            if (!animate)
            {
                CurrentValue = value;
                return;
            }
            ValueAnimator animator = ValueAnimator.OfFloat((float)mPosition, (float)Math.Max(0f, Math.Min(value, 1f)));
            animator.SetDuration(500);

            animator.Update += (sender, e) => CurrentValue = (double)e.Animation.AnimatedValue;
            animator.Start();
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);
            float middle = canvas.Width * (float)mPosition;

            canvas.DrawPaint(mNegativePaint);

            canvas.DrawRect(0, 0, middle, canvas.Height, mPositivePaint);
        }

        protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            int width = MeasureSpec.GetSize(widthMeasureSpec);
            SetMeasuredDimension(width < DefaultWidth ? DefaultWidth : width, DefaultHeight);
        }

        private void Initialize()
        {
            mPositivePaint = new Paint
            {
                AntiAlias = true,
                Color = Color.Rgb(0x99, 0xcc, 0),
            };
            mPositivePaint.SetStyle(Paint.Style.FillAndStroke);

            mNegativePaint = new Paint
            {
                AntiAlias = true,
                Color = Color.Rgb(0xff, 0x44, 0x44)
            };
            mNegativePaint.SetStyle(Paint.Style.FillAndStroke);
        }
    }
}

（6）添加ch2103MainActivity.cs 

using Android.App;
using Android.OS;
using Android.Widget;
using Android.Views.Animations;

namespace MyDemos.SrcDemos
{
    [Activity(Label = "【例21-3】動畫基本用法")]
    public class ch2103MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.ch2103Main);

            //畫板動畫Demo
            var img1 = FindViewById<ImageView>(Resource.Id.ch2103_imageView_DrawableDemo);
            img1.SetImageResource(Resource.Drawable.ch2103DrawableAnimDemo);

            //視圖動畫Demo
            var btn1 = FindViewById<Button>(Resource.Id.ch2103_btnViewDemoStart);
            btn1.Click += (sender, args) => {
                Animation animation = AnimationUtils.LoadAnimation(this, Resource.Animation.ch2103ViewAnimDemo);
                var img2 = FindViewById<ImageView>(Resource.Id.ch2103_imageView_ViewDemo);
                img2.SetImageResource(Resource.Drawable.ch2103ship);
                img2.StartAnimation(animation);
            };

            //屬性動畫Demo
            var myView = FindViewById<ch2103MyView>(Resource.Id.ch2103myview1);
            var seekBar = FindViewById<SeekBar>(Resource.Id.ch2103seekBar1);
            seekBar.StopTrackingTouch += (sender, args) =>
            {
                double currentValue = ((double)seekBar.Progress) / seekBar.Max;
                 myView.SetCurentValue(currentValue, true);
            };
        }
    }
}

  1. 上一頁:
  2. 下一頁:
關於android開發
開發入門初級開發中級開發高級開發關於android開發
相關文章
熱門文章
android軟件開發之獲取本地音樂屬性，android軟件開發 實現購物車那種加減效果，實現購物車 Android Studio同時打開多個項目，androidstudio Creating a Navigation Drawer 創建一個導航抽屜，navigationdrawer Android藍牙技術Bluetooth初體驗 tomcat+java的web程序持續占cpu問題調試
Android WebView遠程代碼執行漏洞簡析

Android WebView遠程代碼執行漏洞簡析 0x00 本文參
Android5.0之Toobar的使用

Android5.0之Toobar的使用 總體上來說，Toolbar的使
Android學習指南之三：Android模擬器的使用方法

    &nb
《AndroidStudio每日一貼》11. 重構之提煉為常量

《AndroidStudio每日一貼》11. 重構之提煉為常量 提煉為
閱讀排行版
Copyright © Android教程網 All Rights Reserved