补间动画与帧动画简单笔记

补间动画与帧动画:

  • 1、Animations
  • 2、Tween
    首先来看看Tween动画
  • 1、Alpha:渐变透明度动画
  • 2、Scale:渐变尺寸伸缩动画
  • 3、Translate:画面转换位置移动动画
  • 4、Rotate:画面转移选择动画
这些动画的执行步奏差不多,先定义Animation动画对象,然后设置动画的一些属性,最后通过startAnimation()方法来开始动画
            setDuration(long durationMillis)   设置动画显示的时间
            startAnimation(Animation animation)   animation为要播放的动画
            
                
  • 第一种:Alpha
    (1)通过xml来创建动画alpha_anim.xml 在res/anim目录下:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="5000"/>
                        </set>
            (2)直接在程序中创建动画:
 Animation alpha = new AlphaAnimation(0.1f,1.0f); 
                        alpha.setDuration(5000);
                        
  • 第二种:Sacle
ScaleAnimation(float fromX, float toX, float fromY, float toY,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
  • 功能:创建一个渐变尺寸伸缩动画
  • fromX,toX,分别是其实和结束时候x坐标上的伸缩尺寸,fromY,toY,分别是起始和结束的时候y坐标的伸缩尺寸
  • pivotXValue,pivotYValue 分别是伸缩动画相对于x,y坐标开始的位置,
  • pivotXType,pivotYType分别是x,y的伸缩模式
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
             android:fromXScale="0.0" android:toXScale="1.0"
             android:fromYScale="0.0" android:toYScale="1.0"
             android:pivotX="50%" android:pivotY="50%"
             android:fillAfter="false" android:duration="5000"/>
                        </set>
  • 第三种:Translate
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) 
 * 创建一个移动画面位置的动画fromXDelta ,fromYDelta 起始坐标  toXDelta toYDelta 结束坐标
<?xml version="1.0" encoding="utf-8"?>
            <set xmlns:android="http://schemas.android.com/apk/res/android">
                <translate
                    android:fromXDelta="10"
                    android:fromYDelta="10"
                    android:toXDelta="100"
                    android:toYDelta="100"/>
            </set>
        
  • 第四种:RotateAnimation
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)
* 参数;fromDegrees 为开始的角度,toDegrees为结束的角度  pivotXType   pivotYType 分别为x,y的伸缩模式 pivotXValue  pivotYValue 分别为伸缩动画相对于x,y坐标的开始位置
        <?xml version="1.0" encoding="utf-8"?>
                <set xmlns:android="http://schemas.android.com/apk/res/android">
                    <rotate
                        android:duration="5000"
                        android:fromDegrees="0"
                        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                        android:pivotX="50%"
                        android:pivotY="50%"
                        android:toDegrees="360"/>
                </set>
  • 3、Frame

             frame动画起始就是逐帧动画,用法也比Tween动画简单,只需要创建一个AnimationDtawable对象来表示Frame动画,然后通过addFrame方法把没一帧要显示的内容加进去就行了,最后通过start方法就可以播放这个动画了,通过还可以使用setOneShort()方法来设置动画是否重复播放,在这里,还需要设置图片的所在位置
             首先在res/main目录下创建一个xml配置文件,用于存放图片资源的索引配置的是一个以<animation-list>根元素和<item>子元素,如下
    
    
        <?xml version="1.0" encoding="utf-8"?>
            <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:drawable="@mipmap/g1" android:duration="300"/>
                <item android:drawable="@mipmap/g2" android:duration="300"/>
                <item android:drawable="@mipmap/g3" android:duration="300"/>
                <item android:drawable="@mipmap/g4" android:duration="300"/>
                <item android:drawable="@mipmap/g5" android:duration="300"/>
                <item android:drawable="@mipmap/g6" android:duration="300"/>
                <item android:drawable="@mipmap/g7" android:duration="300"/>
                <item android:drawable="@mipmap/g8" android:duration="300"/>
                <item android:drawable="@mipmap/g9" android:duration="300"/>
                <item android:drawable="@mipmap/g10" android:duration="300"/>
            </animation-list>
            
          AnimationDrawable a = (AnimationDrawable) frameImage.getDrawable();
            a.start();
             //a.stop();
  • Android框架提供了两种动画系统:属性动画(3.0中引进)以及视图动画,总的来说,属性动画系统是最好的选择,因为他更加灵活,并提供了更多的特性

  • 属性动画系统是一个强大的框架,他允许你动画几乎所有的东西,例如一个对象在屏幕中的位置,要动画多久,和动画之间的距离

  • 通常我们要操作的属性为:

  • rotationX,rotationY 旋转

  • scaleX ,scaleY 缩放

  • translationX,translationY 平移

  • x,y 坐标

  • alpha 透明度

ObjectAnimator:

 //围绕x周旋转360度
                ObjectAnimator.ofFloat(object_image,"rotationX",0.0f,360f).setDuration(500).start();
               
               //组合多个动画
                PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha",1f,0f,1f);
                PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX",1f,0,1f);
                PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY",1f,0,1f);
                ObjectAnimator.ofPropertyValuesHolder(object_image,pvhX,pvhY,pvhZ).setDuration(500).start();
        
        
        ValueAnimator:
        
        和ObjectAnimator用法类锁,
        自由落体实例:
          DisplayMetrics dm = new DisplayMetrics();
                getWindowManager().getDefaultDisplay().getMetrics(dm);
                ValueAnimator anim = ValueAnimator.ofFloat(object_image.getY(),dm.heightPixels + object_image.getHeight()).setDuration(5000);
                anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        object_image.setTranslationY((Float) animation.getAnimatedValue());
                    }
                });
                anim.start();
                
  • 监听动画的事件:
  • 对于动画,一般都是一些辅助效果,比如我们要删除某个元素,我们可能希望是个淡出的效果,但是最终还要删掉,并不是你透明度没有了,还站着位置
    所以我们需要知道动画如何结束
final View view = object_image;
             ObjectAnimator anim = ObjectAnimator.ofFloat(object_image,"alpha",1f,0f).setDuration(500);
               anim.addListener(new Animator.AnimatorListener() {
                    @Override
                 public void onAnimationStart(Animator animation) {
                    }
                    @Override
                  public void onAnimationEnd(Animator animation) {
                     ViewGroup viewGroup = (ViewGroup) view.getParent();
                       if (viewGroup != null){
                        //动画结束的时候删除
                            viewGroup.removeView(object_image);
                       }
                   }
                    @Override
             public void onAnimationCancel(Animator animation) {
                    }
                    @Override
             public void onAnimationRepeat(Animator animation) {
                    }
                });
                anim.start();
                
                或者
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
               public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        ViewGroup viewGropu = (ViewGroup) object_image.getParent();
                        if (viewGropu != null){
                            viewGropu.removeView(object_image);
                        }
                    }
                });
                anim.start(0;)
                
                
  • 动画集合:
  ObjectAnimator a1 = ObjectAnimator.ofFloat(object_image,"translationX",0f,200f);

                ObjectAnimator a2 = ObjectAnimator.ofFloat(object_image,"translationY",0f,200f);

                ObjectAnimator a3 = ObjectAnimator.ofFloat(object_image,"rotation",0.0f,360f,0f);

                AnimatorSet set = new AnimatorSet();
                set.setDuration(1000);

                //set.playTogether(a1,a2,a3);  //三个动画同时执行
                //set.playSequentially(a1,a2,a3);  //按序执行
                //set.setStartDelay(300);  //延时执行

                //a1,a2同时执行,之后a3
                set.play(a1).with(a2);
                set.play(a3).with(a2);
                set.start();
                
  • 注意:
animSet.play().with();也是支持链式编程的,但是:
                animSet.play(anim1).widh(anim2).before(anim3).before(anim4);
                这样是不行的,系统不会根据你写的这一长串决定先后顺序的
                
  • 插值器(Interpolators)
例如:set.setInterpolator(new BounceInterpolator());
        AccelerateDecelerateInterpolator  插补,其变化率慢慢开始和结束,但是通过中间加速
        AccelerateInterpolator  插补  其变化率开始缓慢,然后加快
        AnticipateInterpolator  内插的变化开始落后,然后向前甩
        AnticipateOvershootInterpolator  内插的变化,开始落后,甩向前冲过目标值,然后终于可以追溯到最终值
        BounceInterpolator 插补 其变化在最后反弹
        CycleInterpolator  内插动画重复指定的周期数
        DecelerateInterpolator 插补 其变化的速度开始很快,然后减速
        LinearInterpolator  插补  其变化率是恒定的
        OvershootInterpolator 内插的变化甩向前和冲过的最后一个值,然后回来
        TimeInterpolator 一个接口,使您实现自己的插补
        
        
  • 使用xml文件夹创建属性动画
首先在res下创建animator文件下,然后创建自己的文件
    <?xml version="1.0" encoding="utf-8"?>
        <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                        android:duration="1000"
                        android:propertyName="scaleX"
                        android:valueFrom="1.0"
                        android:valueTo="2.0"
                        android:valueType="floatType"
            >
        </objectAnimator>
  • 多个动画组合
<?xml version="1.0" encoding="utf-8"?>
            <set xmlns:android="http://schemas.android.com/apk/res/android"
                 android:ordering="together"
                >
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="scaleX"
                    android:valueFrom="1"
                    android:valueTo="0.5"/>
                <objectAnimator
                    android:duration="1000"
                    android:propertyName="scaleY"
                    android:valueFrom="1"
                    android:valueTo="0.5"/>

            </set>
            
  • 多个动画组合
   Animator anim = AnimatorInflater.loadAnimator(this,R.animator.anim);
            object_image.setPivotX(0);
            object_image.setPivotY(0);
            //显示的调用invalidate
            object_image.invalidate();
            anim.setTarget(object_image);
            anim.start();
            
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容