多个动画组合、动画调整顺序

animator 动画
动画的作用是让UI有动感, 看上去时尚。

Android中动画分两种方式:

一种方式是补间动画Tween Animation,就是说你定义一个开始和结束,中间的部分由程序运算得到。
另一种叫逐帧动画Frame Animation,就是说一帧一帧的连起来播放就变成了动画。

动画可以实现的效果:
 1. 移动(Translation)
 2. 透明度(alpha)
 3. 旋转(rotate)
 4. 缩放 (scale)

现在分别用例子来讲解:以下的实现都是用代码实现的(ObjectAnimator)

1. 移动(Translation)
    
    主要代码[java]
AnimatorSet set = new AnimatorSet() ;             
        ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "translationX", -500f, 0f); 
        anim.setDuration(2000); 
        ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "translationX", 0f, -500f); 
        anim3.setDuration(2000); 
        ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "translationY", 0f, -500f); 
        anim2.setDuration(2000); 
        ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "translationY", -500f, 0f); 
        anim4.setDuration(2000); 
         
         
        AnimatorSet set3 = new AnimatorSet(); 
        set3.play(anim4).before(anim3) ; 
        AnimatorSet set2 = new AnimatorSet(); 
        set2.play(anim2).before(set3) ; 
        set.play(anim).before(set2); 
        set.start();

AnimatorSet set = new AnimatorSet() ;           
  ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "translationX", -500f, 0f);
  anim.setDuration(2000);
  ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "translationX", 0f, -500f);
  anim3.setDuration(2000);
  ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "translationY", 0f, -500f);
  anim2.setDuration(2000);
  ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "translationY", -500f, 0f);
  anim4.setDuration(2000);
  
  
  AnimatorSet set3 = new AnimatorSet();
  set3.play(anim4).before(anim3) ;
  AnimatorSet set2 = new AnimatorSet();
  set2.play(anim2).before(set3) ;
  set.play(anim).before(set2);
  set.start();

讲解:anim 是从-500f 位置移动到当前位置(X轴);
    anim3是从当前位置移动到-500f的位置(X轴);
    anim2是从当前位置移动-500f的位置(Y轴);
    anim 4是从-500f 位置移动到当前位置(Y轴);

[java]
AnimatorSet set3 = new AnimatorSet(); 
        set3.play(anim4).before(anim3) ; 
        AnimatorSet set2 = new AnimatorSet(); 
        set2.play(anim2).before(set3) ; 
        set.play(anim).before(set2); 
        set.start();

AnimatorSet set3 = new AnimatorSet();
  set3.play(anim4).before(anim3) ;
  AnimatorSet set2 = new AnimatorSet();
  set2.play(anim2).before(set3) ;
  set.play(anim).before(set2);
  set.start();         这样做的目的是为了,让目标view移动一个来回,从哪里出发, 最后回到出发的位置。

2. 透明度(alpha)

主要代码
[java]
AnimatorSet set = new AnimatorSet() ; 
        ObjectAnimator anim = ObjectAnimator.ofFloat(phone, "alpha", 1f, 0f); 
        anim.setDuration(2000); 
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(phone, "alpha", 0f, 1f); 
        anim2.setDuration(2000); 
        set.play(anim).before(anim2) ; 
        set.start();

AnimatorSet set = new AnimatorSet() ;
  ObjectAnimator anim = ObjectAnimator.ofFloat(phone, "alpha", 1f, 0f);
  anim.setDuration(2000);
  ObjectAnimator anim2 = ObjectAnimator.ofFloat(phone, "alpha", 0f, 1f);
  anim2.setDuration(2000);
  set.play(anim).before(anim2) ;
  set.start();
讲解: anim 从可见到不可见;

anim 从不可见到可见;
 3. 旋转(rotate)
主要代码

[java]
nimatorSet set = new AnimatorSet() ;             
        ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "rotationX", 0f, 180f); 
        anim.setDuration(2000); 
        ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "rotationX", 180f, 0f); 
        anim2.setDuration(2000); 
        ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "rotationY", 0f, 180f); 
        anim3.setDuration(2000); 
        ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "rotationY", 180f, 0f); 
        anim4.setDuration(2000); 
         
        set.play(anim).before(anim2); 
        set.play(anim3).before(anim4) ; 
        set.start();

AnimatorSet set = new AnimatorSet() ;           
  ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "rotationX", 0f, 180f);
  anim.setDuration(2000);
  ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "rotationX", 180f, 0f);
  anim2.setDuration(2000);
  ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "rotationY", 0f, 180f);
  anim3.setDuration(2000);
  ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "rotationY", 180f, 0f);
  anim4.setDuration(2000);
  
  set.play(anim).before(anim2);
  set.play(anim3).before(anim4) ;
  set.start();

讲解:anim 从0度转180度(X轴)

anim2从180度转0度(X轴)
            anim3从0度转180度(Y轴)
            anim4从180度转0度(Y轴)

[java]
set.play(anim).before(anim2); 
        set.play(anim3).before(anim4) ;

set.play(anim).before(anim2);
  set.play(anim3).before(anim4) ;这样写X和Y会同时旋转

4. 缩放 (scale)

主要代码

[java]
AnimatorSet set = new AnimatorSet() ;             
        ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "scaleX", 1f); 
        anim.setDuration(1000); 
        ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f); 
        anim2.setDuration(1000); 
        ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "scaleY", 1f); 
        anim3.setDuration(1000); 
        ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "scaleY", 0.5f); 
        anim4.setDuration(1000); 
         
        ObjectAnimator anim5 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f); 
        anim5.setDuration(1000); 
        ObjectAnimator anim6 = ObjectAnimator .ofFloat(phone, "scaleX",  1f); 
        anim6.setDuration(1000); 
        ObjectAnimator anim7 = ObjectAnimator .ofFloat(phone, "scaleY",0.5f); 
        anim7.setDuration(1000); 
        ObjectAnimator anim8 = ObjectAnimator .ofFloat(phone, "scaleY",  1f); 
        anim8.setDuration(1000); 
         
        AnimatorSet set3 = new AnimatorSet() ;  
        set3.play(anim5).before(anim6); 
        AnimatorSet set2 = new AnimatorSet() ;   
        set2.play(anim2).before(set3) ; 
          
         
        AnimatorSet set4 = new AnimatorSet() ;   
        set4.play(anim7).before(anim8) ; 
        AnimatorSet set5 = new AnimatorSet() ;   
        set5.play(anim4).before(set4); 
         
        set.play(anim).before(set2); 
        set.play(anim3).before(set5) ; 
        set.start();

AnimatorSet set = new AnimatorSet() ;           
  ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "scaleX", 1f);
  anim.setDuration(1000);
  ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f);
  anim2.setDuration(1000);
  ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "scaleY", 1f);
  anim3.setDuration(1000);
  ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "scaleY", 0.5f);
  anim4.setDuration(1000);
  
  ObjectAnimator anim5 = ObjectAnimator .ofFloat(phone, "scaleX", 0.5f);
  anim5.setDuration(1000);
  ObjectAnimator anim6 = ObjectAnimator .ofFloat(phone, "scaleX",  1f);
  anim6.setDuration(1000);
  ObjectAnimator anim7 = ObjectAnimator .ofFloat(phone, "scaleY",0.5f);
  anim7.setDuration(1000);
  ObjectAnimator anim8 = ObjectAnimator .ofFloat(phone, "scaleY",  1f);
  anim8.setDuration(1000);
  
  AnimatorSet set3 = new AnimatorSet() ;
  set3.play(anim5).before(anim6);
  AnimatorSet set2 = new AnimatorSet() ; 
  set2.play(anim2).before(set3) ;
  
  
  AnimatorSet set4 = new AnimatorSet() ; 
  set4.play(anim7).before(anim8) ;
  AnimatorSet set5 = new AnimatorSet() ; 
  set5.play(anim4).before(set4);
  
  set.play(anim).before(set2);
  set.play(anim3).before(set5) ;
  set.start();

讲解:anim 从原来大小开始(X轴)

anim2 缩放到原来的1/2(X轴)
            anim3从原来大小开始(Y轴)

anim4 缩放到原来的1/2(Y轴)

anim5从原来的1/2开始放大(X轴)

anim6放大到原来的大小(X轴)

anim7从原来的1/2开始放大(Y轴)

anim8放大到原来的大小(Y轴)

多个动画组合、动画调整顺序

时间: 2024-11-09 23:44:15

多个动画组合、动画调整顺序的相关文章

UI基础--动画(缩放动画, 渐变动画, 左右振动, 移动动画, 组合动画)(封装好)

创建一个CAAnimation的类别 CAAnimation+HCAnimation .h #import <QuartzCore/QuartzCore.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, Axis) { AxisX = 0, ///< x轴 AxisY, ///< y轴 AxisZ ///< z轴 }; typedef NS_ENUM(NSInteger, ShakeDerection) {

Android攻城狮动画组合

组合动画 案例一(续播1): 两个动画A和B,先播放动画A,设置A的AnimationListener(会重写3个方法),当其中一个方法onAnimationEnd()触发,也就是当A播放完毕的时候,开始播放B.核心代码如下: Animation loadAnimation = AnimationUtils.loadAnimation( this, R.anim.translate ); image.startAnimation(loadAnimation); // 开启动画A Animatio

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

动画组合(uber启动时的等待效果)

动画组合(uber启动时的等待效果) by 伍雪颖 - (void)startAnimation { self.layer.masksToBounds = 0; self.layer.cornerRadius = 50; if (self.layer.sublayers == nil) { [self setUpAnimation]; } self.layer.speed = 1; } - (void)setUpAnimation { CABasicAnimation *posAnim = [C

android动画-tween动画实现原理

现有的 Android 动画框架是建立在 View 的级别上的,在 View 类中有一个接口 startAnimation 来使动画开始,startAnimation 函数会将一个 Animation 类别的参数传给 View,这个 Animation 是用来指定我们使用的是哪种动画,现有的动画有平移,缩放,旋转以及 alpha 变换等.如果需要更复杂的效果,我们还可以将这些动画组合起来,这些在下面会讨论到. 要了解 Android 动画是如何画出来的,我们首先要了解 Android 的 Vie

Android动画--属性动画Property Animation

简介 属性动画包含: ObjectAnimator 动画的执行类 ValueAnimator 动画的执行类 AnimatorSet 用于控制一组动画的执行:线性,一起,每个动画的先后执行等. AnimatorInflater 用户加载属性动画的xml文件 ObjectAnimator 单一属性动画 缩放X轴:ScaleX ObjectAnimator().ofFloat(imageView,"ScaleY",1.0f,0.0f).setDuration(3000).start(); 缩

android动画——属性动画(Property Animation)

视图动画请移步:http://blog.csdn.net/u013424496/article/details/51700077 相对与视图动画 ,属性动画(android3.0提出的) 使用条件: 完全弥补了View anim System的缺陷,你可以为一个对象的任何属性添加动画,(View或者非View),同时对象自己也会被修改. 并且当属性变化的时候,property Anim系统会自动的刷新屏幕. 属性动画系统在处理动画方面也更加强劲.更高级的,你可以指定动画的属性,比如颜色,位置,大

Android笔记(六十五) android中的动画——属性动画(propertyanimation)

补间动画只能定义起始和结束两个帧在“透明度”.“旋转”.“倾斜”.“位移”4个方面的变化,逐帧动画也只能是播放多个图片,无法满足我们日常复杂的动画需求,所以谷歌在3.0开始,推出了属性动画(property animation) 属性动画已经不再是针对View来设计的了,也不仅限定于只能实现移动.缩放.淡入淡出这几种动画操作,同时也不再是一种视觉上的动画效果了.它实际上是一种不断的对值进行操作的机制,并将值赋值到指定对象的指定属性上,可以是任意对象的任意属性. ValueAnimator Val

核心动画基础动画(CABasicAnimation)关键帧动画

1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATransition) 2.CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间,速度的控制,本身实现了CAMediaTiming协议 3.CAPropertyAnimation:属性动画也是基类(通过属性进行动画设置,注意是动画属性),不能直接使用. CABasicAnimation: