24-tween动画、frame动画与动画运用

最新推荐文章于 2021-06-04 06:04:02 发布

DYZA

最新推荐文章于 2021-06-04 06:04:02 发布

阅读量541

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/yongzhian/article/details/38545495

版权

Android 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

tween动画

通过对 View 的内容进行一系列的图形变换(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。Tween动画有4种类型：

动画的类型	Xml定义动画使用的配置节点	编码定义动画使用的类
渐变透明度动画效果	<alpha/>	AlphaAnimation
渐变尺寸缩放动画效果	<scale/>	ScaleAnimation
画面转换位置移动动画效果	<translate/>	TranslateAnimation
画面转换位置移动动画效果	<rotate/>	RotateAnimation

参考api路径 Framework Topics/Application Resources/Resource Type/Animation中

package cn.itcast.tween;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
      Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);//使用alpha.xml生成动画效果对象
       // Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
       // Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
       // Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        
       /* Animation animation = new RotateAnimation(0, 360, 
        		Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);  //编码实现旋转 最后4个参数是中心点
        animation.setDuration(5000);*/
        
//        Animation animation = AnimationUtils.loadAnimation(this, R.anim.itcast); //混合动画
        
        animation.setFillAfter(true);//停留在动画结束时候的状态
        ImageView imageView = (ImageView) this.findViewById(R.id.imageView);
        imageView.startAnimation(animation);
    }
}

res/anim/alpha.xml 渐变

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
	<alpha
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="5000"
     />
	<!--fromAlpha 1为可见  toAlpha 0为不可见 持续5s-->
</set>

/tween/res/anim/scale.xml 缩放为1 则是原大小 50%是中心点位置

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  
  <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
         
        android:toXScale="5.0"
        android:toYScale="5.0"
        
        android:pivotX="50%"
        android:pivotY="50%"
        
        android:duration="5000"
         />
         
</set>

/tween/res/anim/translate.xml 平移

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

/tween/res/anim/rotate.xml 旋转 toDgrees为正则顺时针否则逆时针 pivotX旋转中心

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
 <rotate
        android:fromDegrees="0"
        
        android:toDegrees="180"
        
        android:pivotX="50%"
        android:pivotY="50%"
       
       android:duration="5000"
         />
</set>

编码实现旋转参考MainActivity

混合动画/tween/res/anim/itcast.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
	<alpha
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="5000"
     />
    <rotate
        android:fromDegrees="0"
        
        android:toDegrees="180"
        
        android:pivotX="50%"
        android:pivotY="50%"
       
       android:duration="5000"
         />  
    
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        
        android:toXDelta="50"
        android:toYDelta="50"
        
        android:duration="5000"
         />
    
     <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
         
        android:toXScale="5.0"
        android:toYScale="5.0"
        
        android:pivotX="50%"
        android:pivotY="50%"
        
        android:duration="5000"
         />      
</set>

frame动画图片按照顺序播放

即顺序播放事先做好的图像，跟电影类似。开发步骤：

（1）把准备好的图片放进项目res/drawable下。

（2）在项目的res目录下创建文件夹anim，然后在anim文件夹下面定义动画XML文件，文件名称可以自定义。当然也可以采用编码方式定义动画效果（使用AnimationDrawable类）。

（3）为View控件绑定动画效果。调用代表动画的AnimationDrawable的start()方法开始动画。

/frameAnimation/res/drawable/frame.xml

oneshot如果为true则只是播放一次否则多次

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/girl_1" android:duration="200" />
    <item android:drawable="@drawable/girl_2" android:duration="200" />
    <item android:drawable="@drawable/girl_3" android:duration="200" />
    <item android:drawable="@drawable/girl_4" android:duration="200" />
    <item android:drawable="@drawable/girl_5" android:duration="200" />
    <item android:drawable="@drawable/girl_6" android:duration="200" />
    <item android:drawable="@drawable/girl_7" android:duration="200" />
    <item android:drawable="@drawable/girl_8" android:duration="200" />
    <item android:drawable="@drawable/girl_9" android:duration="200" />
    <item android:drawable="@drawable/girl_10" android:duration="200" />
    <item android:drawable="@drawable/girl_11" android:duration="200" />
</animation-list>

/frameAnimation/res/drawable-hdpi/girl_1.gif../frameAnimation/res/drawable-hdpi/girl_2.gif..

/frameAnimation/res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

</LinearLayout>

/frameAnimation/src/cn/itcast/frame/MainActivity.java

package cn.itcast.frame;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.MessageQueue;
import android.widget.TextView;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        TextView textView = (TextView) this.findViewById(R.id.textView);
        textView.setBackgroundResource(R.drawable.frame);//绑定Frame动画图形
        final AnimationDrawable drawable = (AnimationDrawable) textView.getBackground();
        //主线程消息队列中添加空闲的handler对象
        getMainLooper().myQueue().addIdleHandler(new MessageQueue.IdleHandler() {			
			public boolean queueIdle() {
				drawable.start();//启动动画，必须先绑定完成
				return false;//执行完成后把handler从消息队列中删除
			}
		});
        
    }
}

动画运用

activity切换动画

package cn.itcast.animation;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
    private ViewFlipper viewFlipper;
    private float startX;
    private Animation in_lefttoright;
    private Animation out_lefttoright;
    private Animation in_righttoleft;
    private Animation out_righttoleft;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
    }
    

	public void openActivity(View v){
    	Intent intent = new Intent(this, OtherActivity.class);
    	startActivity(intent);
    	//R.anim.outalpha 当前activity从有到消失  enteralpha是新的显示过程
    	this.overridePendingTransition(R.anim.enteralpha, R.anim.outalpha);//实现Activity切换动画效果
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
    <ViewFlipper
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:id="@+id/viewFlipper"
    >
    	<Button  
			    android:layout_width="wrap_content" 
			    android:layout_height="wrap_content" 
			    android:text="打开新Activity"
			    android:onClick="openActivity"
			    />
    </ViewFlipper>

</LinearLayout>

other.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#6600FF"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="这是新Activity"
    />
</LinearLayout>

页面切换

package cn.itcast.animation;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
    private ViewFlipper viewFlipper;
    private float startX;
    private Animation in_lefttoright;
    private Animation out_lefttoright;
    private Animation in_righttoleft;
    private Animation out_righttoleft;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        in_lefttoright = AnimationUtils.loadAnimation(this, R.anim.enter_lefttoright);
        out_lefttoright = AnimationUtils.loadAnimation(this, R.anim.out_lefttoright);
        
        in_righttoleft = AnimationUtils.loadAnimation(this, R.anim.enter_righttoleft);
        out_righttoleft = AnimationUtils.loadAnimation(this, R.anim.out_righttoleft);
        viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);
    }
    
    
    
    @Override
	public boolean onTouchEvent(MotionEvent event) {
    	//用x位置判断左滑动还是右滑动
		if(event.getAction()==MotionEvent.ACTION_DOWN){
			startX = event.getX();
		}else if(event.getAction()==MotionEvent.ACTION_UP){
			float endX = event.getX();
			if(endX > startX){
				viewFlipper.setInAnimation(in_lefttoright);
				viewFlipper.setOutAnimation(out_lefttoright);
				viewFlipper.showNext();//显示下一页
				
			}else if(endX < startX){
				viewFlipper.setInAnimation(in_righttoleft);
				viewFlipper.setOutAnimation(out_righttoleft);
				viewFlipper.showPrevious();//显示前一页
			}
			return true;
		}
		return super.onTouchEvent(event);
	}



	public void openActivity(View v){
    	Intent intent = new Intent(this, OtherActivity.class);
    	startActivity(intent);
    	this.overridePendingTransition(R.anim.enteralpha, R.anim.outalpha);//实现Activity切换动画效果
    }
}

main.xml 注意上下会在ViewFlipper的LinearLayout循环跳转

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
        <Button  
			    android:layout_width="wrap_content" 
			    android:layout_height="wrap_content" 
			    android:text="打开新Activity"
			    android:onClick="openActivity"
			    />
    <ViewFlipper
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:id="@+id/viewFlipper"
    >

  
	   
        <!-- 第一页 -->
	     <LinearLayout
	      android:layout_width="fill_parent"
	      android:layout_height="fill_parent"
	      >
	        <TextView
	        android:layout_width="fill_parent"
    		android:layout_height="wrap_content"
    		android:text="第一页"
	        /> 
			
	    </LinearLayout>
	   
    	<!-- 第二页 -->
	    <LinearLayout
	      android:layout_width="fill_parent"
	      android:layout_height="fill_parent"
	      android:background="#339900"
	      >
	       <TextView
	        android:layout_width="fill_parent"
    		android:layout_height="wrap_content"
    		android:text="第二页"
	        /> 
	   </LinearLayout>
    </ViewFlipper>

</LinearLayout>

/animation/res/anim/enter_lefttoright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
 	<translate
        android:fromXDelta="-100%p" 
        android:toXDelta="0" 
        android:duration="5000"
         />
</set>

/animation/res/anim/out_lefttoright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
 	<translate
        android:fromXDelta="-100%p" 
        android:toXDelta="0" 
        android:duration="5000"
         />
</set>

右到左同上

DYZA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24-tween动画、frame动画与动画运用

tween动画通过对 View 的内容进行一系列的图形变换(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。Tween动画有4种类型：
复制链接

扫一扫