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中监听数值的变换

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" 先反向执行一段,然后再加速反向回来(相当于我们弹簧,先反向压缩一小段,然后在加速弹出)  
  
android:interpolator="@android:anim/anticipate_overshoot_interpolator" 同上先反向一段,然后加速反向回来,执行完毕自带回弹效果(更形象的弹簧效果)  
  
android:interpolator="@android:anim/bounce_interpolator" 执行完毕之后会回弹跳跃几段(相当于我们高空掉下一颗皮球,到地面是会跳动几下)  
  
android:interpolator="@android:anim/cycle_interpolator" 循环,动画循环一定次数,值的改变为一正弦函数:Math.sin(2* mCycles* Math.PI* input)  
  
android:interpolator="@android:anim/linear_interpolator" 线性均匀改变  
  
android:interpolator="@android:anim/overshoot_interpolator" 加速执行,结束之后回弹 

自定义动画

继承Animation 重写initialize () 以及 applyTransformation()方法

 @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        //设置默认时长
        setDuration(5000);
        //动画结束后保留状态
        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>标签创建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即为静态的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();
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 原理: 绘制view时会调用viewGroup中的drawChild函数时,获取view的Animation的Tr...
    xbase阅读 1,175评论 0 1
  • 上一章 书中的示例代码:github 本章主要介绍的是Android动画机制和使用技巧 1.Android视图动画...
    青藤绿阅读 1,618评论 3 32
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,580评论 0 9
  • 人海漂浮,你说很向往《爱在黎明前》里的那对传奇情侣,在黎明破晓前相爱,在日落之前重逢。 你们也相遇相爱了,在黎明破...
    cheryl哟阅读 674评论 6 5
  • 梦想早安7 神看顾美好的一天开始了!有美好的事发生我身上! 我的梦想是想拥有自己的车!我一定要帮...
    梁杏仪阅读 244评论 0 0