UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画。
配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果
相比而言,用xml文档写出来的动画效果,写一次可以很多次调用,但代码配置的话则每一次都需要重复配置过程。
具体使用代码:
//这是对一个按钮设置不同的动画
findViewById(R.id.animation).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//使用代码配置透明动画
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1); //从0到1,代表从完全透明转变为完全不透明
alphaAnimation.setDuration(1000); //这个变化的时间一共花费1秒
v.startAnimation(alphaAnimation); //启动此animation
// 使用XML文档配置透明动画
v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.alphaanimation));
// 使用代码配置旋转动画
//下面新建的旋转动画的意思是从0度旋转到360度,而旋转的中心点是相对于自身宽高的一半
RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(1000);
v.startAnimation(rotateAnimation);
// 使用XML文档配置旋转动画
v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.rotateanimation));
// 使用代码配置移动动画
TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,200); //从(0,0)移动到(200,200)
translateAnimation.setDuration(1000);
v.startAnimation(translateAnimation);
// 使用代码配置移动动画
v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.translateanimation));
// 使用代码配置缩放动画
ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0); //按钮的长和宽的百分比从0缩放到1,缩放的原点在(0,0)
scaleAnimation.setDuration(1000);
v.startAnimation(scaleAnimation);
// 使用XML文档配置缩放动画
v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.scaleanimation));
}
});
创建动画XML文档的方法:
1.在res目录文件下,新建XML文件,选择类型为animation
2.在该文件夹下新建xml文件,用来配置动画的相关信息
透明动画的xml配置文件:
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0"
android:toAlpha="1"
android:duration="1000">
</alpha>
旋转动画的xml配置文件:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%">
</rotate>
移动动画的xml配置文件:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="200"
android:fromYDelta="0"
android:toYDelta="200"
android:duration="1000"> </translate>
缩放动画的xml配置文件:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0"
android:toXScale="1"
android:fromYScale="0"
android:toYScale="1"
android:duration="1000"> </scale>
二、混合动画效果的实现:
1.新建一个animationSet容器,用来储存各种需要混合的动画效果数据
2.分别单独设计混合动画的各部分内容,然后将每种动画都添加进animationSet容器
3.通过startAnimation方法启动混合动画
实际代码:
AnimationSet animationSet = new AnimationSet(true); //true容器内的每个动画都被使用
//透明动画
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(1000);
animationSet.addAnimation(alphaAnimation);
//旋转动画
RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(1000);
animationSet.addAnimation(rotateAnimation);
//缩放动画
ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0);
scaleAnimation.setDuration(1000);
animationSet.addAnimation(scaleAnimation);
//以上的三种动画就是上面的简单动画的复用 v.startAnimation(animationSet);
使用XML文件配置混合动画的方法:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true"
android:duration="1000"> <alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="1000">
</alpha>
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:pivotX="50%"
android:pivotY="50%">
</rotate>
<scale
android:fromXScale="0"
android:toXScale="1"
android:fromYScale="0"
android:toYScale="1"
android:duration="1000">
</scale> </set>
为动画设置监听事件:
动画的监听事件包含了三个时间的调用方法:动画开始,动画重复,动画结束。
实际代码:
Animation a = AnimationUtils.loadAnimation(Main2Activity.this,R.anim.multianimation);
a.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Toast.makeText(getApplicationContext(),"动画开始",Toast.LENGTH_SHORT).show();
} @Override
public void onAnimationEnd(Animation animation) {
Toast.makeText(getApplicationContext(),"动画结束",Toast.LENGTH_SHORT).show();
} @Override
public void onAnimationRepeat(Animation animation) {
Toast.makeText(getApplicationContext(),"动画重复调用",Toast.LENGTH_SHORT).show();
}
});
v.startAnimation(a);
自定义动画的实现方法步骤:
1.自定义class,继承Animation
2.根据实际需要重写父方法,设计代码实现实际需求
3.通过类名调用(使用方法与系统动画一致)
实际代码:
import android.view.animation.Animation;
import android.view.animation.Transformation; /**
* Created by Andrew on 2016/7/27.
*/
public class CustomAnimation extends Animation { @Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
//这是一个可以获取动画控件的宽高和父容器的宽高的方法
super.initialize(width, height, parentWidth, parentHeight);
} //需要特别注意的是,此方法是会执行无数次,期间interpolatedTime会从0到1变化无数次,所有动画的实现基本都与这个数值的变化有关
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
// interpolatedTime 这是一个与动画运行周期相关的数值,在动画运行过程中,它会从0变成1
// t参数是接受变化的控件对象 //自定义动画效果:透明渐变
t.setAlpha(interpolatedTime); //由于interpolatedTime是从0变化到1的,将他的值设置进去技能实现透明度渐变 //自定义动画效果:X轴的晃动效果
t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime)*50),0); super.applyTransformation(interpolatedTime, t);
}
}
UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法的更多相关文章
- (原)android中的动画(三)之动画监听&页面切换动画
1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...
- Android属性动画的监听事件
整体很简单,直接上代码吧.activity_main.xml: <?xml version="1.0" encoding="utf-8"?> < ...
- Android 属性动画监听事件与一个菜单的例子
简单监听事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- 从零开始学Axure原型设计(入门篇)
如果说Sketch是最美.最简洁的设计软件,那么Axure就是最强大的原型制作软件.Axure不仅能制作静态的视觉稿.页面,还能添加交互动作,是进行原型设计的最佳软件之一.虽然Axure的学习曲线比较 ...
- sencha touch 监听视图切换动画(animation)
var animation = this.getLayout().getAnimation(); //添加监听 animation.on({ scope: this, animationend: 'o ...
- transitionend事件 监听 fadeIn fadeOut 两个方法无效(动画结束时无法执行transitionend里面的代码)
//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不 ...
- UI设计篇·入门篇·简单动画的实现,为布局设置动画,用XML布置布局动画
不仅仅控件可以设置动画,一个布局也可以设置动画, 当给一个布局设置了动画的时候,这个布局里所包含的控件都会依赖执行这些动画. 为布局设置动画的实现步骤: 1.新建一个动画,设置需要实现的形式 2.新建 ...
- UI设计篇·入门篇·绘制简单自定义矩形图/设置按钮按下弹起颜色变化/设置图形旋转
Android的基本控件和图形有限,难以满足所有的实际需要和设计需求,好在Android给出了相对完善的图形绘制和自定义控件的API,利用这些API,可以基本满足设计的需求. 自定义图像和控件的方法: ...
随机推荐
- c# 坑人的发邮件组件
System.Net.Mail 在服务器25端口被封禁的情况下,无法使用其它诸如SSL 465端口发送.用过时的System.Web.Mail却可以.是微软更新速度太快呢,还是标准不一致呢. Syst ...
- Linux 配置SSH免密登陆
1.在hadoop01服务器上 通过ssh -keygen 生成公私钥 [ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa] 2.把公钥给hadoop02服务器 3. ...
- Yii2 设计模式——简单工厂模式
除了使用 new 操作符之外,还有更多的制造对象的方法.你将了解到实例化这个活动不应该总是公开进行,也会认识到初始化经常造成“耦合”问题. 应用举例 yii\db\mysql\Schema 中: // ...
- 用 EPWA 写一个 图片播放器 PicturePlayer
用 EPWA 写一个 图片播放器 PicturePlayer . 有关 EPWA,见 <我发起并创立了一个 EPWA 的 开源项目> https://www.cnblogs.com ...
- [ZZ] matlab中小波变换函数dwt2和wavedec2 系数提取函数appcoef2和detcoef2
https://zhidao.baidu.com/question/88038464.html DWT2是二维单尺度小波变换,其可以通过指定小波或者分解滤波器进行二维单尺度小波分解. 而WAVEDEC ...
- Ignite(三): Ignite VS Spark
参考:https://www.itcodemonkey.com/article/9613.html gnite 和 Spark,如果笼统归类,都可以归于内存计算平台,然而两者功能上虽然有交集,并且 I ...
- net use远程重启服务器
在命令行工具中分别输入如下3条命令 net use \\10.10.1.100\ipc$ Password /user:Username shutdown -f -r -m \\10.10.1.1 ...
- gerrit中mysql配置
gerrit数据库使用mysql 进入gerrit数据库 mysql -ugerrit -p -h127.0.0.1 -P3307 密码为用户名加pass mysql> select * fro ...
- 使用R的注意事项
换源,将源切换到中国 具体方法是: options(repos=structure(c(CRAN="https://mirrors.tuna.tsinghua.edu.cn/CRAN/&qu ...
- 操作系统实现线程的几种模式 和 java创建线程的3个方式
操作系统实现线程的几种模式 和 java创建线程的3个方式 这是两个概念 在操作系统中,线程可以实现在用户模式下,也可以实现在内核模式下,也可以两者结合实现. 1.实现线程的三种方式: (1)继承t ...