关键词:
本文以一个简单的小例子,简述在Android开发中,动画的简单应用,仅供学习分享使用。
概述
android提供了各种强大的apis,用于将动画应用到ui元素中,来丰富应用程序的功能和应用。
动画分类
在Android框架中,动画主要分为三类【这三种动画系统都是可行的选择,但一般来说,属性动画系统是首选的使用方法,因为它更灵活,提供了更多的功能】,具体如下:
- 帧动画:将图像资源按顺序一帧一帧的播放出来,形成动画()。
- 补间动画:又叫视图动画,是比较旧的系统,只能用于视图组件,相对比较容易设置和提供能力满足程序的需要。
- 属性动画:在android 3.0(api等级11)中引入的属性动画系统,允许您对任何对象的属性进行动画处理,包括未呈现到屏幕上的属性。该系统是可扩展的,并允许自定义动画类型的属性。
帧动画
将动画资源文件作为图片控件(ImageView)的背景图(background)。
帧动画涉及知识点如下:
- AnimationDrawable: 用于创建逐帧动画的对象,由一系列可拖动对象,可用作视图对象的背景。
- isRunning() 是否正在运行
- stop() 停止动画
- start() 开始运行
帧动画核心代码
在drawable目录下,新增一个动画资源配置文件【animation-list节点下包含item子节点,item有两个属性,android:drawable=图像资源id,android:duration=周期】,如下:
1 <?xml version="1.0" encoding="utf-8"?> 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"> 3 <item android:drawable="@drawable/n0" android:duration="300"></item> 4 <item android:drawable="@drawable/n1" android:duration="300"></item> 5 <item android:drawable="@drawable/n2" android:duration="300"></item> 6 <item android:drawable="@drawable/n3" android:duration="300"></item> 7 <item android:drawable="@drawable/n4" android:duration="300"></item> 8 <item android:drawable="@drawable/n5" android:duration="300"></item> 9 <item android:drawable="@drawable/n6" android:duration="300"></item> 10 <item android:drawable="@drawable/n7" android:duration="300"></item> 11 <item android:drawable="@drawable/n8" android:duration="300"></item> 12 <item android:drawable="@drawable/n9" android:duration="300"></item> 13 </animation-list>
java设置代码如下:
1 private AnimationDrawable drawable; 2 3 @Override 4 protected void onCreate(Bundle savedInstanceState) 5 super.onCreate(savedInstanceState); 6 setContentView(R.layout.activity_drawable); 7 ImageView imageView= (ImageView) this.findViewById(R.id.ivLetter); 8 drawable= (AnimationDrawable) imageView.getBackground(); 9 drawable.start(); 10 11 12 @Override 13 public boolean onTouchEvent(MotionEvent event) 14 if(event.getAction()==MotionEvent.ACTION_DOWN) 15 if(drawable.isRunning()) 16 drawable.stop(); 17 else 18 drawable.start(); 19 20 21 return super.onTouchEvent(event); 22
补间动画
补间动画,又称渐变动画是指定义起始状态,结束状态,中间状态等,然后其他部分由程序自动生成,从而形成动画。
补间动画涉及知识点如下:
- TranslateAnimation 平移动画 控制对象位置的动画。
- RotateAnimation 旋转动画 控制对象旋转的动画。这个旋转需要放置在xy平面上。您可以指定中心要使用的点,其中(0,0)是左上角。如果未指定,则(0,0)为默认旋转点。
- ScaleAnimation 缩放动画 控制对象的比例尺的动画。您可以指定点用于缩放中心。
- AlphaAnimation 透明度动画 控制对象的alpha级的动画,通过更改透明度属性,对于对象的淡入淡出,这是一个很有用的方法。
- AnimationSet 动画集合 上述动画可以组合使用。
- setFillAfter(true); 设置动画结束后的填充
- setDuration(2000); 动画周期 setRepeatCount(2); 重复次数
- setRepeatMode(Animation.REVERSE); 重复模式
补间动画核心代码如下:
1 /** 2 * 平移 3 * @param v 4 */ 5 protected void transfer_click(View v) 6 7 //参数是平移的起始坐标和结束坐标(起始X轴位置,结束X轴位置,起始Y轴位置,结束Y轴位置)的改变量。 8 //TranslateAnimation trans=new TranslateAnimation(0.0f,300f,0.0f,300f); 9 //fromXType 动画平移改变量的类型 10 //Animation.RELATIVE_TO_SELF,0 表示控件现在的坐标+0*控件本身的宽度或高度 11 //Animation.RELATIVE_TO_SELF,0.5f 表示控件现在的坐标+0.5*控件本身的宽度或高度 12 //Animation.RELATIVE_TO_PARENT 相对于父控件,计算方式和Animation.RELATIVE_TO_SELF一样 13 //fromXValue 起始坐标值的改变量,如果类型是ABSOLUTE,则此值为绝对数字,否则则表示百分比(0-1)之间。 14 TranslateAnimation trans=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1); 15 trans.setDuration(2000);//设置周期 16 trans.setFillAfter(true);//当结束时保持结束位置 17 trans.setRepeatCount(2);//设置重复次数 18 trans.setRepeatMode(Animation.REVERSE);//重复模式 19 ivTaichi.startAnimation(trans);//启动 20 21 22 /** 23 * 旋转 24 * @param v 25 */ 26 protected void rotate_click(View v) 27 //参数是旋转的起始偏移量(度数),结束度数,旋转中心点(相对x轴 位置和y轴位置)。 28 //RotateAnimation rotate=new RotateAnimation(0.0f,90.f,100.0f,100.0f); 29 RotateAnimation rotate =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); 30 rotate.setFillAfter(true); 31 rotate.setDuration(2000); 32 rotate.setRepeatCount(2); 33 rotate.setRepeatMode(Animation.REVERSE); 34 ivTaichi.startAnimation(rotate);//启动 35 36 37 /** 38 * 缩放 39 * @param v 40 */ 41 protected void scale_click(View v) 42 //fromX toX 动画起始和结束时的X轴水平缩放因子 43 //fromY toY 动画起始和结束时的Y轴水平缩放因子 44 ScaleAnimation scale=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f); 45 scale.setFillAfter(true); 46 scale.setDuration(2000); 47 scale.setRepeatCount(2); 48 scale.setRepeatMode(Animation.REVERSE); 49 ivTaichi.startAnimation(scale);//启动 50 51 52 /** 53 * 透明度动画 54 * @param v 55 */ 56 protected void alpha_click(View v) 57 //fromAlpha toAlpha 动画起始和结束时的透明度。范围(0,1) 58 AlphaAnimation alpha=new AlphaAnimation(0,1); 59 alpha.setFillAfter(true); 60 alpha.setDuration(2000); 61 alpha.setRepeatCount(2); 62 alpha.setRepeatMode(Animation.REVERSE); 63 ivTaichi.startAnimation(alpha);//启动 64 65 66 /** 67 * 集合动画 68 * @param v 69 */ 70 protected void set_click(View v) 71 AnimationSet set=new AnimationSet(true); 72 //TranslateAnimation animation1=new TranslateAnimation(0.0f,300.0f,0.0f,300.0f); 73 RotateAnimation animation2 =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); 74 ScaleAnimation animation3=new ScaleAnimation(0.0f,1.0f,0.0f,1.0f); 75 AlphaAnimation animation4=new AlphaAnimation(0,1); 76 //set.addAnimation(animation1); 77 set.addAnimation(animation2); 78 set.addAnimation(animation3); 79 set.addAnimation(animation4); 80 set.setFillAfter(true); 81 set.setDuration(2000); 82 set.setRepeatCount(2); 83 set.setRepeatMode(Animation.REVERSE); 84 ivTaichi.startAnimation(set);//启动 85
属性动画
属性动画主要通过改变对象的属性,来实现动画,可以进行扩展,且功能丰富。
属性动画涉及知识点如下:
- ObjectAnimator 该ValueAnimator的子类提供了对目标对象上的动画属性的支持。该类的构造函数使用参数来定义将被动画化的目标对象以及将被动画化的属性的名称。
- setDuration(2000); 动画周期
- setRepeatCount(2); 重复次数
- setRepeatMode(Animation.REVERSE); 重复方式
- start(); 启动
属性动画核心代码如下:
1 /** 2 * 平移 3 * @param v 4 */ 5 protected void transfer_click(View v) 6 //target 属性动画的目标控件 7 //propertyName 产生动画的属性,所有的属性必须拥有set,get方法 8 //values 属性动画的范围集合 9 ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200,-200,0); 10 objectAnimator.setDuration(2000); 11 objectAnimator.setRepeatCount(2); 12 objectAnimator.setRepeatMode(Animation.REVERSE); 13 objectAnimator.start(); 14 15 16 /** 17 * 旋转 18 * @param v 19 */ 20 protected void rotate_click(View v) 21 ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180); 22 objectAnimator.setDuration(2000); 23 objectAnimator.setRepeatCount(2); 24 objectAnimator.setRepeatMode(Animation.REVERSE); 25 objectAnimator.start(); 26 27 28 /** 29 * 缩放 30 * @param v 31 */ 32 protected void scale_click(View v) 33 ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1,0); 34 objectAnimator.setDuration(2000); 35 objectAnimator.setRepeatCount(2); 36 objectAnimator.setRepeatMode(Animation.REVERSE); 37 objectAnimator.start(); 38 39 40 /** 41 * 透明度 42 * @param v 43 */ 44 protected void alpha_click(View v) 45 ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1); 46 objectAnimator.setDuration(2000); 47 objectAnimator.setRepeatCount(2); 48 objectAnimator.setRepeatMode(Animation.REVERSE); 49 objectAnimator.start(); 50 51 52 /** 53 * 集合动画 54 * @param v 55 */ 56 protected void set_click(View v) 57 AnimatorSet set=new AnimatorSet(); 58 List<Animator> list=new ArrayList<Animator>() ; 59 ObjectAnimator objectAnimator1 =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200); 60 ObjectAnimator objectAnimator2 =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180); 61 ObjectAnimator objectAnimator3 =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1); 62 ObjectAnimator objectAnimator4 =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1); 63 list.add(objectAnimator1); 64 list.add(objectAnimator2); 65 list.add(objectAnimator3); 66 list.add(objectAnimator4); 67 //播放一序列的动画对象 68 set.playSequentially(list); 69 // 70 set.start(); 71
备注
学而不思则罔,思而不学则殆!!!
一起学android之activity(代码片段)
概述本文以一个简单的小例子,简述Android开发中Activity的相关知识,仅供学习分享使用。什么是Activity?Activity是一个应用程序组件,通常显示为一个页面,用户可以通过Activity进行交互,Activity窗口通常是满屏的,但有时也会比屏... 查看详情
一起学spring之基础篇(代码片段)
本文主要讲解Spring的基础环境搭建以及演变由来,仅供学习分享使用,如有不足之处,还请指正。什么是Spring?Spring是一个开源框架,用来处理业务逻辑层和其他层之间的耦合问题。因此Spring将面向接口开发的思想贯穿整个系统... 查看详情
跟我一起学opencv第四课之图像的基本操作(代码片段)
1.图像是由像素组成的,所以修改了像素就可以实现图像的改变。2先看灰度图像(单通道):*****2.获取灰度图像的像素值使用: intgray=gray_src.at<uchar>(row,col);*****3.修改灰度图像的像素值使用:gray_src.at<uchar>(row,col)=255-g... 查看详情
一起学vue自定义组件之拼图小游戏(代码片段)
通过学习Vue自定义组件,可以开发一些小功能,自娱自乐,巩固学习的基础知识,本文以一个简单的拼图小游戏的例子,简述Vue自定义组件的开发,调用等基本流程,仅供学习分享使用,如有不足... 查看详情
unity之animation(代码片段)
Unity之Animation一、Avatar1.创建Avatar(1)Legacy(2)Generic(3)Humanoid二、Animation视图1.动画时间轴(1)关键帧清单时间轴模式(2)曲线时间轴模式2.创建新动画剪辑3.支持的可动画属性4.曲线编 查看详情
一起学vue之事件处理(代码片段)
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正。监听事件可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。如下所示... 查看详情
零基础学android之常用控件(代码片段)
常用控件上次我们讲了布局:线性布局、表格布局、帧布局和相对布局,这个布局,它是在整个移动端设计内容的一个框架的方式,以什么方式来设计界面。最终在界面里面,放置的是控件,所谓控件... 查看详情
小师妹学jvm之:jit中的printcompilation(代码片段)
...LogCompilation日志文件中的内容定义。今天我们再和小师妹一起学习LogCompilation的姊妹篇PrintCompilation,看看都有什么妙用吧。PrintCompilati 查看详情
一起学vue之样式绑定(代码片段)
在前端开发中,设置元素的class列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。概述Vue操作元素的class列表和内联样式是数据绑定的一个常见... 查看详情
一起学源码-微服务nexflixeureka源码三:eurekaserver启动之eurekaserver上下文eurekaclient创建(代码片段)
前言上篇文章已经介绍了EurekaServer环境和上下文初始化的一些代码,其中重点讲解了environment初始化使用的单例模式,以及EurekaServerConfigure基于接口对外暴露配置方法的设计方式。这一讲就是讲解EurekaServer上下文初始化剩下的内... 查看详情
android图形架构之七——choreographer源码分析(代码片段)
...用于同Vsync机制配合,控制同步处理输入(Input)、动画(Animation)、绘制(Draw)三个UI操作。其实UI显示的时候每一帧要完成的事情只有这三种。如下图是官网的相关说明:Choreographer接收显示系统的时间脉冲(垂直同步信号-VSync信... 查看详情
一起学vue之表单输入绑定(代码片段)
在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正。基础用法你可以用v-model指令在表单<input>、<textarea>及<select>... 查看详情
跟我一起学opencv第一课之图像加载,修改,保存(代码片段)
使用opencv前记得引入库和头文件:#include<opencv2opencv.hpp> 1.加载图像(cv::imread)(OPENCV支持JPG,PNG,TIFF等常见格式图像文件加载)imread函数原型是:CV_EXPORTS_WMatimread(constString&filename,intflags=IMREAD_COLOR);------imread加载一副由filename... 查看详情
一起学vue之列表渲染(代码片段)
在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正。用v-for把一个数组对应为一组元素我们可以用v-for指令基于一个数组来渲染一个列... 查看详情
#跟着小白一起学鸿蒙#[番外]一起学做flappybird(代码片段)
#跟着小白一起学鸿蒙#[番外]一起学做FlappyBird作者:王石简介记得很久以前有个大火的像素游戏叫FlappyBird,我们就一起看看如何能用OpenHarmony学习做个FlappyBird。本文中引用的图片资源均来自与Github。开发1.HAP应用建立《#跟着小白... 查看详情
text#android#property_animation(代码片段)
#盲盒+码##跟着小白一起学鸿蒙#[番外]一起学做tetris(下)(代码片段)
#跟着小白一起学鸿蒙#[番外]一起学做Tetris(下)作者:王石简介接着《#跟着小白一起学鸿蒙#[番外]一起学做Tetris(上)》我们完善了页面,增加了左右按键和之前方块显示,方块消除。开发1.按键增加之前我们布局一直是只有个Canvas... 查看详情
android工具类篇动画工具类(代码片段)
importandroid.view.animation.AlphaAnimation;importandroid.view.animation.Animation;importandroid.view.animation.Animation.AnimationListener;importandroid.view.animation.RotateAnimation;importandroid.v 查看详情