Android View 動畫框架

最近在溫習一下舊的姿勢（知識），順便熟練一下markdown,做個筆記。。

視圖動畫

  • 透明度動畫

    AlphaAnimation aa = new AlphaAnimation(0,1);
aa.setDuration(1000);
view.starttAnimation(aa);

  • 旋轉動畫

    /**
* @param  ①旋轉的初始角度  ②旋轉的終止角度  ③ ④  旋轉中心的橫縱坐標,也可以用自身當作參考系
*/
RotateAnimation ra = new RotateAnimation(0,360,100,100)
ra.setDuration(1000);
view.startAnimation(ra);

  • 位移動畫

    /**
*@param   始末位置的橫縱坐標
*/
TranslateAnimation ta = new TranslateAnimation(0,200,0,300);
ta.setDuration(1000);
view.startAnimation(ta);

  • 縮放動畫

    /*
* @param   縮放的中心點
*/
ScaleAnimation sa = new ScaleAnimation(0,2,0,2);
sa.setDuratuon(1000);
view.startAnimation(sa);

  • 動畫集合

    AnimationSet as = new AnimationSet(true);
as.addAnimation(animation1);
as.addAnimation(animation2);
.....
view.startAnimation(as)

屬性動畫

1. ObjectAnimator

/*
* @param    ①操作的View   ②要操縱的屬性  ③設置屬性的變化值 
*/
ObjectAnimator animator = ObjectAnimator.ofFloat(view,"translateX",300);
animator.setDuration(1000);
animator.start();
  • 要操縱的屬性必須具有get、set方法，不然ObjectAnimator就無法起效
    • translationX translationY
    • rotationrotationX rotationY
    • scaleX scaleY
    • x和y
    • alpha

2. PropertyValuesHolder

類似于視圖動畫中的AniamtionSet

 PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", 100f);
        PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("ScaleX", 1f, 0, 1f);
        PropertyValuesHolder sacleY = PropertyValuesHolder.ofFloat("ScaleY", 1f, 0, 1f);
        ObjectAnimator.ofPropertyValuesHolder(mImage,translationY,scaleX,sacleY).setDuration(1000).start();

3.ValueAnimator

本身不提供任何動畫效果，可以在AnimatorUpdateListener中監(jiān)聽數(shù)值的變換

ValueAnimator valueAnimator = ValueAnimator.ofInt(start, end);

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int animatedValue = (int) animation.getAnimatedValue();

            }
        });

4.AnimatorSet

ObjectAnimator translationX = ObjectAnimator.ofFloat(mImage, "translationX", 300f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(mImage, "ScaleX", 1f, 0, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(mImage, "ScaleY", 1f, 0, 1f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(1000);
        animatorSet.playTogether(translationX,scaleX,scaleY);
        animatorSet.start();

5.在XML中使用動畫

<objectAnimator
        android:duration="1000"
        android:propertyName="scaleX"
        android:valueFrom="1.0"
        android:valueTo="2.0"
        android:valueType="floatType"/>
 

Animator animator = AnimatorInflater.loadAnimator(this, R.animator.scale_animator);
        animator.setTarget(mImage);
        animator.start();

6.View的animate方法

mImage.animate()
                .alpha(1)    //設置透明度
                .y(300)      //設置 坐標
                .setDuration(1000)   //設置動畫時長
                .withStartAction(new Runnable() {
                    @Override
                    public void run() {

                    }
                })
                .withEndAction(new Runnable() {
                    @Override
                    public void run() {

                    }
                })
                .start();

布局動畫

所謂的布局動畫是指在ViewGroup上，給ViewGroup增加View時添加一個動畫過渡效果

Android：animateLayoutChanges = "true"

mViewGroup = (LinearLayout) findViewById(R.id.imagegroup);
        //設置過渡動畫
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1);
        scaleAnimation.setDuration(2000);
        //設置布局動畫的顯示屬性
        LayoutAnimationController lac = new LayoutAnimationController(scaleAnimation, 0.5f);
        lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
        //給ViewGroup設置布局動畫
        mViewGroup.setLayoutAnimation(lac);
  • LayoutAnimationController.ORDER_NORMAL——順序
  • LayoutAnimationController.ORDER_RANDOM ——隨機
  • LayoutAnimationController.ORDER_REVERSE——反序

Interpolators(插值器)

定義動畫的變換速率，類似于物理中的加速度

android:interpolator="@android:anim/accelerate_interpolator" 設置動畫為加速動畫(動畫播放中越來越快)  
  
android:interpolator="@android:anim/decelerate_interpolator" 設置動畫為減速動畫(動畫播放中越來越慢)  
  
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 設置動畫為先加速在減速(開始速度最快 逐漸減慢)  
  
android:interpolator="@android:anim/anticipate_interpolator" 先反向執(zhí)行一段，然后再加速反向回來（相當于我們彈簧，先反向壓縮一小段，然后在加速彈出）  
  
android:interpolator="@android:anim/anticipate_overshoot_interpolator" 同上先反向一段，然后加速反向回來，執(zhí)行完畢自帶回彈效果（更形象的彈簧效果）  
  
android:interpolator="@android:anim/bounce_interpolator" 執(zhí)行完畢之后會回彈跳躍幾段（相當于我們高空掉下一顆皮球，到地面是會跳動幾下）  
  
android:interpolator="@android:anim/cycle_interpolator" 循環(huán)，動畫循環(huán)一定次數(shù)，值的改變?yōu)橐徽液瘮?shù)：Math.sin(2* mCycles* Math.PI* input)  
  
android:interpolator="@android:anim/linear_interpolator" 線性均勻改變  
  
android:interpolator="@android:anim/overshoot_interpolator" 加速執(zhí)行，結束之后回彈

自定義動畫

繼承Animation 重寫initialize () 以及 applyTransformation()方法

 @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        //設置默認時長
        setDuration(5000);
        //動畫結束后保留狀態(tài)
        setFillAfter(true);
        //設置默認的插值器
        setInterpolator(new BounceInterpolator());

        this.mCenterWidth = width/2;
        this.mCenterHeight = height/2;
    }

 @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        this.mCamera = new Camera();

        Matrix matrix = t.getMatrix();
        mCamera.save();
        //使用Camera設置旋轉的角度
        mCamera.rotateX(20*interpolatedTime);
        //將旋轉變換作用到Metrix上
        mCamera.getMatrix(matrix);
        mCamera.restore();
        //通過pre 方法設置矩陣作用前的的偏移量來改變旋轉中心
        matrix.preTranslate(mCenterWidth,mCenterHeight);
        matrix.postTranslate(-mCenterWidth,-mCenterHeight);

    }

SVG (Scalable Vector Graphics ) 5.0

path

使用<path>標簽創(chuàng)建SVG 常用的指令

  • L 繪制直線
  • M 移動到某一坐標
  • A 繪制弧線
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height = "200dp"
    android:width = "200dp"
    android:viewportHeight = "100"
    android:viewportWidth = "100">

    <group
        android:name="test"
        android:pivotX="36"
        android:pivotY="36"
        android:rotation="0">
        <path
            android:name="v"
            android:fillColor="@color/colorAccent"
            android:pathData="M 25 50 a 25,25 0 1,0 50,0 L 25 80"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="2"
            />
    </group>
</vector>

AnimatedVectorDrawable

  1. 在res的drawable文件夾下通過<animated-vector>標簽來聲明對AnimatedVectorDrawable的使用，并指定其作用的path或group.

    <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/yuanhu"
    tools:targetApi="lollipop">

    <target
        android:animation="@anim/rotate_animator"
        android:name="test"/>
</animated-vector>

  2. 對應的vector即為靜態(tài)的VectorDrawable.

    注意：target 中name的屬性和vector中需要作用的name屬性保持一致

  3. 通過animation屬性，將一個動畫作用到了對應name的元素上，objectAnimator的代碼如下：

    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="4000"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

  4. 將AnimatrdVectorDrawable XML 文件設置給一個ImageView 作為背景顯示

    <ImageView
            android:id="@+id/vectorimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/animator_yuanhu"/>

  5. 在代碼中控制SVG動畫

    mVector = (ImageView) findViewById(R.id.vectorimage);
((Animatable) mVector.getDrawable()).start();
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 原理： 繪制view時會調(diào)用viewGroup中的drawChild函數(shù)時，獲取view的Animation的Tr...
    xbase閱讀 1,593評論 0贊 1
  • 上一章 書中的示例代碼：github 本章主要介紹的是Android動畫機制和使用技巧 1.Android視圖動畫...
    青藤綠閱讀 1,690評論 3贊 32
  • 1 背景 不能只分析源碼呀，分析的同時也要整理歸納基礎知識，剛好有人微博私信讓全面說說Android的動畫，所以今...
    未聞椛洺閱讀 2,852評論 0贊 10
  • 人海漂浮，你說很向往《愛在黎明前》里的那對傳奇情侶，在黎明破曉前相愛，在日落之前重逢。 你們也相遇相愛了，在黎明破...
    cheryl喲閱讀 752評論 6贊 5
  • 夢想早安7 神看顧美好的一天開始了！有美好的事發(fā)生我身上！ 我的夢想是想擁有自己的車！我一定要幫...
    梁杏儀閱讀 281評論 0贊 0

友情鏈接更多精彩內(nèi)容