Android 之 3种动画

2018-01-06 本文已影响50人 3Q竹林

这里将讲述：

逐帧动画(FrameAnimation) 、补间动画(TweenAnimation) 、属性动画(PropertyAnimation)；
As的res文件中，分别使用drawable、anim、animator目录下的xml编写动画；

逐帧动画(FrameAnimation)

它的实现方式也有两种：代码和xml方式；

代码方式：

private void setSrcFrameAnim() {  
    animationDrawable = new AnimationDrawable();  
    // 为AnimationDrawable添加动画帧  
    animationDrawable.addFrame(  
        getResources().getDrawable(R.drawable.img00), 50);  
    animationDrawable.addFrame(  
        getResources().getDrawable(R.drawable.img01), 50);  
    animationDrawable.addFrame(  
        getResources().getDrawable(R.drawable.img02), 50);  
   
    // 设置为循环播放  
    animationDrawable.setOneShot(false);  
    imageView.setBackground(animationDrawable);  
    animationDrawable.start(); 
}

xml方式：
在res/drawable文件夹下新建animation-list的XML实现帧动画

 <?xml version="1.0" encoding="utf-8"?>  
 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
     android:oneshot="true" >  
   
     <!-- animation-list 帧动画 -->  
     <!-- android:oneshot的值为 false代表播放多次，true代表只播放一次 -->  

     <item  
     android:drawable="@drawable/img00"  
     android:duration="50"/>  
     <item  
     android:drawable="@drawable/img01"  
     android:duration="50"/>  
     <item  
     android:drawable="@drawable/img02"  
     android:duration="50"/>  
 </animation-list>

在布局中可以这样：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.havorld.frameanimation.MainActivity" >  
    <ImageView  
    android:id="@+id/imageView"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_centerInParent="true" />  
    <!-- android:background="@drawable/frame_anim" -->  
 </RelativeLayout>

在代码中我们这样：

private void setFrameAnim() {  
    imageView.setBackgroundResource(R.drawable.frame_anim);  
    animationDrawable = (AnimationDrawable) imageView.getBackground();  
    animationDrawable.start(); 

    //或者这样
    animationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_anim);  
    imageView.setBackground(animationDrawable);  
    animationDrawable.start(); 
｝

Drawable Animation（补间动画）

补间动画的属性有：RotateAnimation、AlphaAnimation、ScaleAnimation、TranslateAnimation、AnimationSet ，再者可以加上用于xml动画文件引入的AnimationUtils类，示例：

  ImageView iv = (ImageView) dialog.findViewById(R.id.loading_iv);
  RotateAnimation rotateAnimation = new RotateAnimation(0, 5760, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f); //相对自己左上为0.0
 // Animation rotateAnimation=AnimationUtils.loadAnimation(this, R.anim.rote); //当然这里你也可以用xml方式
  rotateAnimation.setDuration(10000);
  iv.startAnimation(rotateAnimation); 
// rotateAnimation.start(); //或这样启动

Property Animation 属性动画

涉及到的属性值有 (名称一定要写对)：
    1、透明度：alpha
    2、旋转度数：rotation、rotationX、rotationY
    3、平移：translationX、translationY
    4、缩放：scaleX、scaleY

示例 1. 使用代码实现：

    ObjectAnimator animator = ObjectAnimator
        .ofFloat(iv, "rotation", 0.0F, 360.0F)
        .setDuration(800);
    animator .setRepeatCount(ObjectAnimator.INFINITE);
    animator.setInterpolator(new LinearInterpolator());
    animator .start();

示例 2. 使用 xml文件配置动画（R.animator.anim_file）：

    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:ordering="sequentially" >  
        <objectAnimator  
            android:duration="2000"  
            android:propertyName="translationX"  
            android:valueFrom="-500"  
            android:valueTo="0"  
            android:valueType="floatType" >  
        </objectAnimator>  
      
        <set android:ordering="together" >  
            <objectAnimator  
                android:duration="3000"  
                android:propertyName="rotation"  
                android:valueFrom="0"  
                android:valueTo="360"  
                android:valueType="floatType" >  
            </objectAnimator>  
      
            <set android:ordering="sequentially" >  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="1"  
                    android:valueTo="0"  
                    android:valueType="floatType" >  
                </objectAnimator>  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="0"  
                    android:valueTo="1"  
                    android:valueType="floatType" >  
                </objectAnimator>  
            </set>  
        </set>  
    </set>

然后在代码中用AnimatorInflater引入：

   Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  
   animator.setTarget(view);  
   animator.start();

动画总结：

补间动画：
XXXAnimation animation = new XXXAnimation (); //需要什么动画就new什么动画，然后.start();
AnimationSet animationSet = new AnimationSet(false); //代码方式实现补间动画
animationSet.addAnimation(new AlphaAnimation(1,0));
Animation animation = AnimationUtils.loadAnimation(context, R.anim.cs);//加载的是补间动画文件（在anim中）；
注意：若想给动画设置重复模式，设置给AnimationSet是无效的，需要给每个单个动画设置才能生效，如：
alphaAnimation.setRepeatMode(Animation.RESTART);
alphaAnimation.setRepeatCount(Animation.INFINITE);

属性动画：
ObjectAnimator.ofFloat(iv, "rotation", 0.0F, 360.0F).start();
AnimatorSet animatorSet = new AnimatorSet(); //代码方式实现属性动画
animatorSet.playTogether();
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.scale_with_alpha); //加载的是属性动画文件（在animator中）
anim、animator目录下的xml中动画属性是不同的：
1. res的anim文件夹下XML文件中属性对应关系（补间动画）：
  <set> 对应代码中 AnimationSet
  <rotate> 对应： RotateAnimation
  <alpha> 对应： AlphaAnimation
  <scale> 对应： ScaleAnimation
  <translate> 对应： TranslateAnimation
2. res的animator文件夹的XML文件中属性对应关系（属性动画）：
  <set> 对应代码中的 AnimatorSet
  <objectAnimator> 对应代码中的 ObjectAnimator
  <animator> 对应代码中的 ValueAnimator

接下来说下Drawable的绘制(在res的drawable目录下)：

1 . <layer-list>的机理就是一层层的覆盖，示例：

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--底部图层a，是其他图层item位置锁定的基础-->
    <item android:height="99dp" android:width="99dp" android:gravity="center" >
      <rotate
          android:drawable="@drawable/ic_launcher"  <----此处可用shap替代，也可以放带动画的Drawable
          android:fromDegrees="0"
          android:pivotX="50%"
          android:pivotY="50%"
          android:toDegrees="360"/>
    </item>  

    <!--该图层放在底部图层a之上，位置为相对a的位置-->
    <item
        android:gravity="center"
        android:height="40dp"
        android:width="40dp">
      <rotate
          android:drawable="@drawable/lt"
          android:fromDegrees="360"
          android:pivotX="50%"
          android:pivotY="50%"
          android:toDegrees="0"/>
    </item>
  </layer-list>

2 . Drawable的<animated-selector>类似于selector（效果如CheckBox的动画变换）示例：

  <?xml version="1.0" encoding="utf-8"?>
  <animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/state_on"
        android:drawable="@drawable/lt"
        android:state_selected="true"/>
    <item
        android:id="@+id/state_off"
        android:drawable="@drawable/progressbar"
        android:state_selected="false"/>
    <transition
        android:fromId="@+id/state_on"
        android:toId="@+id/state_off">
      <animation-list android:oneshot="true">
        <item
            android:drawable="@drawable/lt"
            android:duration="188"/>
        <item
            android:drawable="@drawable/ic_launcher"
            android:duration="188"/>
        <item
            android:drawable="@drawable/shape_noraml"
            android:duration="122"/>
        <item
            android:drawable="@drawable/progressbar"
            android:duration="122"/>
      </animation-list>
    </transition>

    <transition    <!--补间动画执行过程配置-->
        android:fromId="@+id/state_off"
        android:toId="@+id/state_on">
      <animation-list android:oneshot="true">
        <item
            android:drawable="@drawable/progressbar"
            android:duration="122"/>
        <item
            android:drawable="@drawable/shape_noraml"
            android:duration="122"/>
        <item
            android:drawable="@drawable/ic_launcher"
            android:duration="188"/>
        <item
            android:drawable="@drawable/lt"
            android:duration="188"/>
      </animation-list>
    </transition>
  </animated-selector>

布局文件中代码

<Button
   android:id="@+id/btn_web_native"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:background="@drawable/animation_selector"
   android:onClick="onClicked"
   />

在代码中配置

  view.setSelected(!view.isSelected());

告诉你个小秘密：

ProgressBar听这名字就是做进度用的，但是它功能不仅仅如此，你也可以用它来做图片切换、旋转等动画，比如上边三种方法绘制的Drawable都能设置给ProgressBar，而达到强大的动画效果，如下：

布局代码：

  <ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="77dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/loading_iv"
    android:indeterminateDrawable="@drawable/loadding" />

drawable/loadding.xml代码：

          
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <!--底部图层a，是其他图层item位置锁定的基础-->
      <item
          android:gravity="center"
          android:height="59dp"
          android:width="59dp">
        <rotate
            android:fromDegrees="1080"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="0">
          <shape            <----此处改用shap替代drawable，下边则采用带动画的drawable
              android:innerRadiusRatio="3"
              android:shape="ring"
              android:thicknessRatio="9"
              android:useLevel="false">
            <gradient
                android:centerColor="@android:color/holo_red_light"
                android:centerY="0.2"
                android:endColor="#1E90FF"
                android:startColor="#000000"
                android:type="sweep"
                android:useLevel="false"/>
          </shape>
        </rotate>
      </item>
    
      <!--该图层放在底部图层a之上，位置为相对a的位置-->
      <item android:drawable="@drawable/progressbar"  <----此处采用带动画的drawable
          android:gravity="center"
          android:height="33dp"
          android:width="33dp">
      </item>
    </layer-list>

xml文件@drawable/progressbar代码：

 <?xml version="1.0" encoding="utf-8"?>
 <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
     android:pivotX="50%"
     android:pivotY="50%"
     android:duration="10"
     android:repeatCount="-1"
     android:fromDegrees="0"
     android:toDegrees="360">
   <shape
       android:innerRadiusRatio="3"
       android:shape="ring"
       android:thicknessRatio="8"
       android:useLevel="false">
     <gradient
         android:centerColor="#FF7121"
         android:centerY="0.50"
         android:endColor="#FFFF00"
         android:startColor="#6BD3FF"
         android:type="sweep"
         android:useLevel="false"/>
   </shape>
 </animated-rotate>

当然ProgressBar也可以用上边的animation-list方式添加 android:indeterminateDrawable="@drawable/animation-list" 属性，效果也很棒，这个实验的机会就留给你啦！

其它

还有一种简单的设置动画的方法，如下：

//ViewCompat这样的单次属性动画，只适用于要求只执行一次的需求，执行完后所有状态将会停留在最后一刻，
//这种单值设置动画就是为了设置view的终态的，其默认view的初始状态就是当其view的状态。
ViewCompat.animate(target)
     .setDuration(2100)
     .translationY(screenData.onScreenHeight/2)
     .setInterpolator(new BounceInterpolator())
     .rotation(1200)
     .alpha(0)
     .scaleX(8)
     .scaleY(7)
     .start()；

。
。
。
。
。
。
好啦，就先写到这里，后继再来追加。。。

Android 之 3种动画

这里将讲述：

逐帧动画(FrameAnimation)

Drawable Animation（补间动画）

Property Animation 属性动画

动画总结：

接下来说下Drawable的绘制(在res的drawable目录下)：

告诉你个小秘密：

其它

猜你喜欢

热点阅读