美文网首页
2018-04-25

2018-04-25

作者: 5050_ | 来源:发表于2018-04-25 16:24 被阅读0次

    补间动画(Tween Animation)

        包括  (1)透明度渐变动画  AlphaAnimation
              (2)旋转动画  RotateAnimation
              (3)缩放动画  ScaleAnimation
              (4)平移动画  TranslateAnimation
    

    通过xml文件设置动画效果

    1.做出如图所示的界面,然后给各个按钮加上onclick,对按钮进行监听:


    图1-13.png

    代码如下:

     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="145dp"
        android:src="@drawable/a09" />
    
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"
         android:orientation="horizontal" >
    
         <Button
             android:id="@+id/button1"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="透明"
             android:onClick="Alpha" />
    
         <Button
             android:id="@+id/button2"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="旋转" 
             android:onClick="Rotate"/>
    
         <Button
             android:id="@+id/button3"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="缩放" 
             android:onClick="Scale"/>
    
         <Button
             android:id="@+id/button4"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="平移"
             android:onClick="Translate" />
    
         <Button
             android:id="@+id/button5"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="全部" 
             android:onClick="All"/>
     </LinearLayout>
    
     </RelativeLayout>
    

    2.在layout中创建一个Android XML文件,把resource type改成Tween Animation。
    (1)先实现Alpha透明的动画a.xml代码如下:

     <?xml version="1.0" encoding="utf-8"?>
     <alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse"
    xmlns:android="http://schemas.android.com/apk/res/android">
     </alpha>
    

    (2)实现Rotate旋转的动画r.xml代码如下:

      <?xml version="1.0" encoding="utf-8"?>  
     <!-- android:pivotX="50%"
          android:pivotY="50%"相对于自身宽的一半进行旋转不能写(0.5f)
          50%p——>相对于自身容器的X,Y为中心旋转 
     -->
     <rotate 
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:duration="2000"
    xmlns:android="http://schemas.android.com/apk/res/android"> 
     </rotate>
    

    (3)实现Scale缩放的动画s.xml代码如下:

      <?xml version="1.0" encoding="utf-8"?>
     <scale
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="2.5"
    android:toYScale="2.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse"
    xmlns:android="http://schemas.android.com/apk/res/android">
     </scale>
    

    (4)实现Translate平移的动画t.xml代码如下:

     <?xml version="1.0" encoding="utf-8"?>
     <translate
    android:fromXDelta="-80%p"
    android:fromYDelta="0%p"
    android:toXDelta="80%p"
    android:toYDelta="0%p"
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:fillAfter="true"
    xmlns:android="http://schemas.android.com/apk/res/android">
     </translate>
    

    (5)实现多个动画结合在一起的效果all.xml代码如下:

     <?xml version="1.0" encoding="utf-8"?>
     <set>
    <alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse"
    xmlns:android="http://schemas.android.com/apk/res/android">
    </alpha>
    <rotate 
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:duration="2000"
    xmlns:android="http://schemas.android.com/apk/res/android">
    </rotate>
    <scale
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="2.5"
    android:toYScale="2.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:repeatCount="3"
    android:repeatMode="reverse"
    xmlns:android="http://schemas.android.com/apk/res/android">
    </scale> 
     </set>
    

    3.编写界面交互代码
    在xml文件中定义好补间动画资源后,需要实现将动画资源设置到控件上。要实现该功能,需要在MainActivity中调用AnimationUtils类的loadAnimation()方法加载动画资源,并为图片设置指定的动画。具体代码如下所示:

     public class MainActivity extends Activity {
     ImageView img;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img=(ImageView) findViewById(R.id.imageView1);
    }
    
     public void Alpha(View view){
    Animation aa=AnimationUtils.loadAnimation(this, R.anim.a);
    img.startAnimation(aa);
     }
      public void Rotate(View view){
    Animation ra=AnimationUtils.loadAnimation(this, R.anim.r);
    img.startAnimation(ra);
     }
     public void Scale(View view){
    Animation sa=AnimationUtils.loadAnimation(this, R.anim.s);
    img.startAnimation(sa); 
     }
      public void Translate(View view){
    Animation ta=AnimationUtils.loadAnimation(this, R.anim.t);
    img.startAnimation(ta);
     }
     public void All(View view){
    Animation all=AnimationUtils.loadAnimation(this, R.anim.all);
    img.startAnimation(all);
     }
     }
    

    本节知识点:

     <!-- android:pivotX="50%"
      android:pivotY="50%"相对于自身宽的一半进行旋转不能写(0.5f)
      50%p——>相对于自身容器的X,Y为中心旋转 
     -->
    

    相关文章

      网友评论

          本文标题:2018-04-25

          本文链接:https://www.haomeiwen.com/subject/hakylftx.html