Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
本文实例讲述了android动画之渐变动画(tween animation)。分享给大家供大家参考,具体如下:
android 平台提供了两类动画。 一类是tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。
第二类就是 frame动画,即顺序的播放事先做好的图像,与gif图片原理类似。
下面就讲一下tweene animations。
主要类:
animation 动画
alphaanimation 渐变透明度
rotateanimation 画面旋转
scaleanimation 渐变尺寸缩放
translateanimation 位置移动
animationset 动画集
有了这些类,那么我们如何来实现动画效果呢?
以自定义view为例,该view很简单,画面上只有一个图片。 现在我们要对整个view分别实现各种tween动画效果。
alphaanimation
通过代码实现 alphaanimation,如下:
//初始化 animation alphaanimation = new alphaanimation(0.1f, 1.0f); //设置动画时间 alphaanimation.setduration(3000); this.startanimation(alphaanimation);
其中alphaanimation类第一个参数fromalpha表示动画起始时的透明度, 第二个参数toalpha表示动画结束时的透明度。
setduration用来设置动画持续时间。
rotateanimation
代码:
animation rotateanimation = new rotateanimation(0f, 360f); rotateanimation.setduration(1000); this.startanimation(rotateanimation);
其中rotateanimation类第一个参数fromdegrees表示动画起始时的角度, 第二个参数todegrees表示动画结束时的角度。
另外还可以设置伸缩模式pivotxtype、pivotytype, 伸缩动画相对于x,y 坐标的开始位置pivotxvalue、pivotyvalue等。
scaleanimation
代码:
//初始化 animation scaleanimation = new scaleanimation(0.1f, 1.0f,0.1f,1.0f); //设置动画时间 scaleanimation.setduration(500); this.startanimation(scaleanimation);
scaleanimation类中
第一个参数fromx ,第二个参数tox:分别是动画起始、结束时x坐标上的伸缩尺寸。
第三个参数fromy ,第四个参数toy:分别是动画起始、结束时y坐标上的伸缩尺寸。
另外还可以设置伸缩模式pivotxtype、pivotytype, 伸缩动画相对于x,y 坐标的开始位置pivotxvalue、pivotyvalue等。
translateanimation
代码:
//初始化 animation translateanimation = new translateanimation(0.1f, 100.0f,0.1f,100.0f); //设置动画时间 translateanimation.setduration(1000); this.startanimation(translateanimation);
translateanimation类
第一个参数fromxdelta ,第二个参数toxdelta:分别是动画起始、结束时x坐标。
第三个参数fromydelta ,第四个参数toydelta:分别是动画起始、结束时y坐标。
参数详细说明:
表二 |
||
xml节点 | 功能说明 | |
alpha | 渐变透明度动画效果 | |
<alpha android:fromalpha=”0.1″ android:toalpha=”1.0″ android:duration=”3000″ /> |
||
fromalpha |
属性为动画起始时透明度 |
0.0表示完全透明 1.0表示完全不透明 以上值取0.0-1.0之间的float数据类型的数字 |
toalpha | 属性为动画结束时透明度 |
表三 |
|||
scale | 渐变尺寸伸缩动画效果 | ||
<scale android:interpolator= “@android:anim/accelerate_decelerate_interpolator” android:fromxscale=”0.0″ android:toxscale=”1.4″ android:fromyscale=”0.0″ android:toyscale=”1.4″ android:pivotx=”50%” android:pivoty=”50%” android:fillafter=”false” android:startoffset=“700” android:duration=”700″ android:repeatcount=”10″ /> |
|||
fromxscale[float] fromyscale[float] | 为动画起始时,x、y坐标上的伸缩尺寸 | 0.0表示收缩到没有 1.0表示正常无伸缩 值小于1.0表示收缩 值大于1.0表示放大 |
|
toxscale [float] toyscale[float] |
为动画结束时,x、y坐标上的伸缩尺寸 | ||
pivotx[float] pivoty[float] |
为动画相对于物件的x、y坐标的开始位置 | 属性值说明:从0%-100%中取值,50%为物件的x或y方向坐标上的中点位置 | |
表四 |
|||
translate | 画面转换位置移动动画效果 | ||
<translate android:fromxdelta=”30″ android:toxdelta=”-80″ android:fromydelta=”30″ android:toydelta=”300″ android:duration=”2000″ /> |
|||
fromxdelta toxdelta |
为动画、结束起始时 x坐标上的位置 | ||
fromydelta toydelta |
为动画、结束起始时 y坐标上的位置 | ||
表五 |
|||
rotate | 画面转移旋转动画效果 | ||
<rotate android:interpolator=”@android:anim/accelerate_decelerate_interpolator” android:fromdegrees=”0″ android:todegrees=”+350″ android:pivotx=”50%” android:pivoty=”50%” android:duration=”3000″ /> |
|||
fromdegrees | 为动画起始时物件的角度 | 说明 当角度为负数——表示逆时针旋转 当角度为正数——表示顺时针旋转 (负数from——to正数:顺时针旋转) (负数from——to负数:逆时针旋转) (正数from——to正数:顺时针旋转) (正数from——to负数:逆时针旋转) |
|
todegrees | 属性为动画结束时物件旋转的角度 可以大于360度 | ||
pivotx pivoty |
为动画相对于物件的x、y坐标的开始位 | 说明:以上两个属性值 从0%-100%中取值 50%为物件的x或y方向坐标上的中点位置 |
|
答案是 animationset。
初看整个类名,还以为只是用来存放 animation的一个set, 细看才发现,该类也是继承自 animation的。
下面我们实现一个动画,该动画会让图片移动的同时,图片透明度渐变,直接看代码吧。
//初始化 translate动画 translateanimation = new translateanimation(0.1f, 100.0f,0.1f,100.0f); //初始化 alpha动画 alphaanimation = new alphaanimation(0.1f, 1.0f); //动画集 animationset set = new animationset(true); set.addanimation(translateanimation); set.addanimation(alphaanimation); //设置动画时间 (作用到每个动画) set.setduration(1000); this.startanimation(set);
是不是觉得很简单呢?
附上整个view类的代码吧。
package com.yfz.view; import com.yfz.r; import android.content.context; import android.graphics.canvas; import android.graphics.drawable.bitmapdrawable; import android.util.log; import android.view.keyevent; import android.view.view; import android.view.animation.alphaanimation; import android.view.animation.animation; import android.view.animation.animationset; import android.view.animation.rotateanimation; import android.view.animation.scaleanimation; import android.view.animation.translateanimation; public class tweenanim extends view { //alpha动画 - 渐变透明度 private animation alphaanimation = null; //sacle动画 - 渐变尺寸缩放 private animation scaleanimation = null; //translate动画 - 位置移动 private animation translateanimation = null; //rotate动画 - 画面旋转 private animation rotateanimation = null; public tweenanim(context context) { super(context); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); log.e("tween", "ondraw"); //加载一个图片 canvas.drawbitmap(((bitmapdrawable)getresources().getdrawable(r.drawable.gallery_photo_5)).getbitmap(), 0, 0, null); } @override public boolean onkeydown(int keycode, keyevent event) { log.e("tween", "onkeydown"); return true; } @override public boolean onkeyup(int keycode, keyevent event) { log.e("tween", "onkeydown"); switch (keycode) { case keyevent.keycode_dpad_up: log.e("tween", "onkeydown - keycode_dpad_up"); alphaanimation = new alphaanimation(0.1f, 1.0f); //设置动画时间 alphaanimation.setduration(3000); this.startanimation(alphaanimation); break; case keyevent.keycode_dpad_down: log.e("tween", "onkeydown - keycode_dpad_down"); rotateanimation = new rotateanimation(0f, 360f); rotateanimation.setduration(1000); this.startanimation(rotateanimation); break; case keyevent.keycode_dpad_left: log.e("tween", "onkeydown - keycode_dpad_left"); //初始化 scaleanimation = new scaleanimation(0.1f, 1.0f,0.1f,1.0f); //设置动画时间 scaleanimation.setduration(500); this.startanimation(scaleanimation); break; case keyevent.keycode_dpad_right: log.e("tween", "onkeydown - keycode_dpad_right"); //初始化 translateanimation = new translateanimation(0.1f, 100.0f,0.1f,100.0f); //设置动画时间 translateanimation.setduration(1000); this.startanimation(translateanimation); break; case keyevent.keycode_dpad_center: log.e("tween", "onkeydown - keycode_dpad_center"); //初始化 translate动画 translateanimation = new translateanimation(0.1f, 100.0f,0.1f,100.0f); //初始化 alpha动画 alphaanimation = new alphaanimation(0.1f, 1.0f); //动画集 animationset set = new animationset(true); set.addanimation(translateanimation); set.addanimation(alphaanimation); //设置动画时间 (作用到每个动画) set.setduration(1000); this.startanimation(set); break; default: break; } return true; } }
在activity中调用该类时,需要注意一定setfocusable(true), 否则焦点在activity上的话,onkeyup方法是不会生效的。
调用该view的代码:
tweenanim anim = new tweenanim(lesson_11.this); anim.setfocusable(true); setcontentview(anim);
上面通过java代码,实现了4中不同的tween动画,其实在android中完全可以通过 xml文件来实现动画。这种方式可能更加简洁、清晰,也更利于重用。
下面我们分别对这几种动画改用xml来实现。
首先是alphaanimation。
alpha_anim.xml:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromalpha="0.1" android:toalpha="1.0" android:duration="2000" /> </set>
不用解释了吧。
rotateanimation
rotate_anim.xml:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromdegrees="0" android:todegrees="360" android:pivotx="50%" android:pivoty="50%" android:duration="500" /> </set>
scaleanimation
scale_anim.xml:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromxscale="0.0" android:toxscale="1.0" android:fromyscale="0.0" android:toyscale="1.0" android:pivotx="50%" android:pivoty="50%" android:fillafter="false" android:duration="500" /> </set>
translateanimation
translate_anim.xml:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromxdelta="10" android:toxdelta="100" android:fromydelta="10" android:toydelta="100" /> </set>
布局文件都已经写完,那么如何来使用这些文件呢?
其实也很简单,此时需要用到animationutils类。 通过该类中 loadanimation 方法来加载这些布局文件。
如:
这次view类的代码如下:
package com.yfz.view; import com.yfz.r; import android.content.context; import android.graphics.canvas; import android.graphics.drawable.bitmapdrawable; import android.util.log; import android.view.keyevent; import android.view.view; import android.view.animation.alphaanimation; import android.view.animation.animation; import android.view.animation.animationset; import android.view.animation.animationutils; import android.view.animation.rotateanimation; import android.view.animation.scaleanimation; import android.view.animation.translateanimation; public class tweenanim2 extends view { //alpha动画 - 渐变透明度 private animation alphaanimation = null; //sacle动画 - 渐变尺寸缩放 private animation scaleanimation = null; //translate动画 - 位置移动 private animation translateanimation = null; //rotate动画 - 画面旋转 private animation rotateanimation = null; public tweenanim2(context context) { super(context); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); log.e("tween", "ondraw"); //加载一个图片 canvas.drawbitmap(((bitmapdrawable)getresources().getdrawable(r.drawable.gallery_photo_5)).getbitmap(), 0, 0, null); } @override public boolean onkeydown(int keycode, keyevent event) { log.e("tween", "onkeydown"); return true; } @override public boolean onkeyup(int keycode, keyevent event) { log.e("tween", "onkeydown"); switch (keycode) { case keyevent.keycode_dpad_up: log.e("tween", "onkeydown - keycode_dpad_up"); alphaanimation = animationutils.loadanimation(this.getcontext(), r.anim.alpha_anim); this.startanimation(alphaanimation); break; case keyevent.keycode_dpad_down: log.e("tween", "onkeydown - keycode_dpad_down"); rotateanimation = animationutils.loadanimation(this.getcontext(), r.anim.rotate_anim); this.startanimation(rotateanimation); break; case keyevent.keycode_dpad_left: log.e("tween", "onkeydown - keycode_dpad_left"); scaleanimation = animationutils.loadanimation(this.getcontext(), r.anim.scale_anim); this.startanimation(scaleanimation); break; case keyevent.keycode_dpad_right: log.e("tween", "onkeydown - keycode_dpad_right"); translateanimation = animationutils.loadanimation(this.getcontext(), r.anim.translate_anim); this.startanimation(translateanimation); break; case keyevent.keycode_dpad_center: log.e("tween", "onkeydown - keycode_dpad_center"); //初始化 translate动画 translateanimation = animationutils.loadanimation(this.getcontext(), r.anim.translate_anim); //初始化 alpha动画 alphaanimation = animationutils.loadanimation(this.getcontext(), r.anim.alpha_anim); //动画集 animationset set = new animationset(true); set.addanimation(translateanimation); set.addanimation(alphaanimation); //设置动画时间 (作用到每个动画) set.setduration(1000); this.startanimation(set); break; default: break; } return true; } }
希望本文所述对大家android程序设计有所帮助。
推荐阅读
-
Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
-
Android动画之补间动画(Tween Animation)实例详解
-
Android动画之补间动画(Tween Animation)实例详解
-
Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
-
Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转
-
Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转
-
android 动画之基础动画 alpha(渐变) scale(缩放) translate(移动) rotate(旋转)
-
补间动画(透明度渐变、缩放渐变、位移渐变、旋转渐变、组合渐变)
-
详解Android动画之Tween Animation_html/css_WEB-ITnose
-
详解Android动画之Tween Animation_html/css_WEB-ITnose