zoukankan      html  css  js  c++  java
  • Android动画-补间(Tween)动画

    Android动画的两种方式,其中帧动画上篇文章已经讲了,这次主要讲解的就是补间动画,补间动画就是动画业务场景中常用的旋转,平移,缩放,和渐变效果,帧动画是通过轮播动画实现动画效果,补间动画通过在两个关键帧之间补充渐变的动画效果来实现的,相对而言补间动画的暂用的空间更小,补间动画有两种方式,一种是直接在代码中是实现,另外一种是在XML文件中定义,然后通过代码调用,如果以后有需要直接改xml文件就行不需要改代码。

    布局文件

    先来看下是实现的效果:

    Layout中xml设置:

    <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.example.googletween.MainActivity" >
    
        <LinearLayout
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:onClick="alphaEvent"
                android:layout_width="0dip"
                android:layout_height="wrap_content" 
                android:layout_weight="1"
                android:text="渐变"
                />
            
             <Button
                android:onClick="roateEvent"
                android:layout_width="0dip"
                android:layout_height="wrap_content" 
                android:layout_weight="1"
                android:text="旋转"
                />
             
              <Button
                android:onClick="tranEvent"
                android:layout_width="0dip"
                android:layout_height="wrap_content" 
                android:layout_weight="1"
                android:text="位移"
                />
              
               <Button
                android:onClick="scaleEvent"
                android:layout_width="0dip"
                android:layout_height="wrap_content" 
                android:layout_weight="1"
                android:text="缩放"
                />
               
                  <Button
                android:onClick="multiEvent"
                android:layout_width="0dip"
                android:layout_height="wrap_content" 
                android:layout_weight="1"
                
                android:text="混合"
                />
        </LinearLayout>
    
        <ImageView 
            android:id="@+id/image_change"
            android:layout_width="wrap_content"
            android:layout_below="@id/line"
    		android:layout_height="wrap_content"
    		android:layout_centerHorizontal="true"
    		android:layout_centerVertical="true"
    		android:src="@drawable/ic_launcher"
            />
        
    </RelativeLayout>
    

     动画效果

    渐变透明度,初始化构造函数的时候两个数字最小透明度和最大透明度:

     	AlphaAnimation alphaAnimation=new AlphaAnimation(0.1f, 1f);
        	//设置动画时间
        	alphaAnimation.setDuration(3000);
        	//重复次数
        	alphaAnimation.setRepeatCount(1);
        	alphaAnimation.setRepeatMode(Animation.REVERSE);
        	image.startAnimation(alphaAnimation);
    

      旋转效果,初始化的时候是旋转0度到360度:

    RotateAnimation rotateAnimation=new RotateAnimation(0f, 360f);
    		rotateAnimation.setDuration(2000);
    		image.startAnimation(rotateAnimation);
    

      位移效果,第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标,第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标:

    	TranslateAnimation translateAnimation=new TranslateAnimation(0f, 100f, 0f, 100f);
        	translateAnimation.setDuration(2000);
        	image.startAnimation(translateAnimation);
    

      缩放效果

       	ScaleAnimation scaleAnimation=new ScaleAnimation(0.1f, 1f, 0.1f, 1f);
        	scaleAnimation.setDuration(2000);
        	image.startAnimation(scaleAnimation);
    

      缩放的同时移动(最后两种效果混合):

    AnimationSet  animationSet=new AnimationSet(true);
        	TranslateAnimation translateAnimation=new TranslateAnimation(0f, 100f, 0f, 100f);
        	ScaleAnimation scaleAnimation=new ScaleAnimation(0.1f, 1f, 0.1f, 1f);
    
        	animationSet.addAnimation(translateAnimation);
        	animationSet.addAnimation(scaleAnimation);
        	animationSet.setDuration(2000);
        	image.startAnimation(animationSet);
    

     第二种是在xml文件中定义,将代码中的属性值在xml中设置即可:

    渐变xml

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

      调用:

       	Animation alphaAnimation=AnimationUtils.loadAnimation(this, R.anim.alpha);
        	image.startAnimation(alphaAnimation);

    旋转xml:

    <?xml version="1.0" encoding="utf-8"?>
    <rotate
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000" 
        android:fromDegrees="0"
        android:toDegrees="360">
        
    
    </rotate>

      调用:

    	Animation rotateAnimation=AnimationUtils.loadAnimation(this, R.anim.roate);
        	image.startAnimation(rotateAnimation);
    

      缩放xml:

    <?xml version="1.0" encoding="utf-8"?>
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000" 
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1">
        
    
    </scale>

      调用:

      	Animation scaleAnimation=AnimationUtils.loadAnimation(this, R.anim.scale);
        	image.startAnimation(scaleAnimation);
    

      位移xml:

    <?xml version="1.0" encoding="utf-8"?>
    <translate
        xmlns:android="http://schemas.android.com/apk/res/android"
         android:duration="2000"
         android:fromXDelta="0"
         android:toXDelta="100"
         android:fromYDelta="0"
         android:toYDelta="100">
        
    
    </translate>
    

      调用:

    Animation translateAnimation=AnimationUtils.loadAnimation(this, R.anim.tran);
        	image.startAnimation(translateAnimation);
    

    组合xml:

    <?xml version="1.0" encoding="utf-8"?>
    <set>
    
        <alpha
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="2000"
            android:fromAlpha="0.1"
            android:repeatCount="1"
            android:repeatMode="reverse"
            android:toAlpha="1.0" >
        </alpha>
    
        <rotate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="2000"
            android:fromDegrees="0"
            android:toDegrees="360" >
        </rotate>
    
        <scale
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="2000"
            android:fromXScale="0"
            android:fromYScale="0"
            android:toXScale="1"
            android:toYScale="1" >
        </scale>
    
        <translate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="2000"
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:toXDelta="100"
            android:toYDelta="100" >
        </translate>
    
    </set>
    

      调用:

    Animation animationSet=AnimationUtils.loadAnimation(this, R.anim.set);
        	image.startAnimation(animationSet);
  • 相关阅读:
    JS内容左右滑动
    JS返回上一页
    两栏 三栏的css
    舅舅去世
    .net学习开始
    以论坛管理的方式来处理公司资讯
    《尽管去做》摘
    网页视频播放器代码集
    火影忍者和海贼王
    古代风水文献
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/4102689.html
Copyright © 2011-2022 走看看