安卓开发_浅谈Android动画(四)

Property动画

概念:属性动画,即通过改变对象属性的动画。

特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置

一、重要的动画类及属性值:

1、  ValueAnimator 基本属性动画类

方法

描述

setDuration(long duration)

设置动画持续时间的方法

setEvaluator(TypeEvaluator value)

设置插值计算的类型

setInterpolator(TimeInterpolator value)

设置时间插值器的类型

addUpdateListener(ValueAnimator.AnimatorUpdateListener listener)

更新动画对象的监听事件

setRepeatCount(int value)

设置动画重复执行的次数

setRepeatMode(int value)

设置动画重复方式

addListener(Animator.AnimatorListener l)

设置监听事件 有 1、  动画开始时的监听 2、  动画结束时的监听 3、  动画重新开始时的监听

start()

开始执行动画

cancel()

停止当前执行的动画,属性值会停止在当前执行位置

end()

结束动画,属性值会停止在结束位置,即使没有播放完动画

2、  ObjectAnimator 对象属性动画类,继承自ValueAnimator

方法

描述

ofFloat(T target, Property<T, Float> property, float... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的float类型的变化值

ofInt(T target, Property<T, Integer> property, int... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的int类型的变化值

ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的object类型的变化值

setTarget(Object target)

设置执行动画的对象

  • ofFloat(T target, Property<T, Float> property, float... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的float类型的变化值

  • ofInt(T target, Property<T, Integer> property, int... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的int类型的变化值

  • ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object... values)

第一个参数为执行动画的对象。第二个值为属性,之后为一个不确定数目的object类型的变化值 setTarget(Object target) 设置执行动画的对象

3、  TimeInterpolator 时间插值器

设置动画执行的动作效果

Eg:animator.setInterpolator(new BounceInterpolator() //设置动画效果为跳跃

类型

描述

AccelerateInterpolator

加速,开始时慢中间加速

DecelerateInterpolator

减速,开始时快然后减速

AccelerateDecelerateInterolator

先加速后减速,开始结束时慢,中间加速

AnticipateInterpolator

反向 ,先向相反方向改变一段再加速播放

AnticipateOvershootInterpolator

反向加超越,先向相反方向改变,再加速播放,会超出目的值然后缓慢移动至目的值

BounceInterpolator

跳跃,快到目的值时值会跳跃,如目的值100,后面的值可能依次为85,77,70,80,90,100

CycleIinterpolator

循环,动画循环一定次数,值的改变为一正弦函数:Math.sin(2 * mCycles * Math.PI * input)

LinearInterpolator

线性,线性均匀改变

OvershottInterpolator

超越,最后超出目的值然后缓慢改变到目的值

4、  PropertyValuesHolder

作用:对一个View执行多个属性动画,该类对多属性动画进行了优化,会合并一些invalidate()来减少刷新视图,该类在3.1中引入

5、TypeEvaluator  插值计算的类型

(1)、IntEvaluator:属性的值类型为int

(2)、FloatEvaluator:属性的值类型为float

(3)、ArgbEvaluator:属性的值类型为十六进制颜色值

6、常用动画属性

(1)translationX,translationY:移动坐标

(2)rotation,rotationX,rotationY:旋转,rotation用于2D旋转角度,3D中用到后两个

(3)scaleX,scaleY:缩放

(4)alpha:透明度

(5)backgroundColor:  背景

二、动画Demo

1、位移动画

 1 ValueAnimator animator = ObjectAnimator.ofFloat(image, "translationY", 300);//第一个参数为执行动画的对象 ImageView第二个参数为动画属性:y轴位移 ,第三个参数为value
 2             //动画执行的事件
 3             animator.setDuration(3000);
 4             animator.setRepeatCount(ValueAnimator.INFINITE); //设置循环次数:无限
 5             animator.setRepeatMode(ValueAnimator.REVERSE);   //设置循环方式:倒叙循环 
 6             
 7 //            设置加速效果
 8 //          animator.setInterpolator(new AccelerateDecelerateInterpolator());
 9             animator.setInterpolator(new BounceInterpolator()); //设置弹跳效果
10             animator.start();

效果:

2、绕X轴旋转动画

1 ValueAnimator animator = ObjectAnimator.ofFloat(image, "rotationX", 0,720); 
              //第一个参数为执行动画的对象ImageView 第二个参数为动画属性,第三个参数为初始角度,第四个动画为结束角度 
2             animator.setDuration(4000);
3             animator.setRepeatCount(ValueAnimator.INFINITE);
4             animator.setRepeatMode(ValueAnimator.REVERSE);
5             animator.start();

效果图:

3、图片绕xy轴转动,两个属性动作的情况

1             PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("rotationY",0f,45f,90f,160f,260f,360f );
2             PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("rotationX",0f,360f );
3             
4              ValueAnimator  animator = ObjectAnimator.ofPropertyValuesHolder(image,pvh1,pvh2);//将多个需要并发执行的动画合并执行
5             animator.setDuration(4000);
6             animator.setRepeatCount(ValueAnimator.INFINITE);
7             animator.setRepeatMode(ValueAnimator.REVERSE);
8             animator.start();

效果图:

4、多个属性动画一起执行的情况 

 1        AnimatorSet aSet = new AnimatorSet();
 2             ValueAnimator a1 = ObjectAnimator.ofFloat(image,"translationX",0f,200f);
 3             a1.setDuration(2000);
 4             
 5             ValueAnimator a2 = ObjectAnimator.ofFloat(1f,1.5f,1.0f);
 6             a2.addUpdateListener(new AnimatorUpdateListener() {
 7                 
 8                 @Override
 9                 public void onAnimationUpdate(ValueAnimator animation) {
10                     // TODO Auto-generated method stub
11                     //更新对象的属性的方法
12                     float value = (Float) animation.getAnimatedValue();
13                     image.setScaleX(value);
14                     image.setScaleY(value);
15                     
16                 }
17             });
18             a2.setDuration(1000);
19             
20             //旋转
21             ValueAnimator a3 = ObjectAnimator.ofFloat(image,"rotation",0f,360);
22             a3.setDuration(3000);
23             
24             //渐变
25             ValueAnimator a4 = ObjectAnimator.ofFloat(image,"alpha",1f,0f);
26             a4.setDuration(1000);
27             
28             aSet.play(a1).with(a3);
29             aSet.play(a2).after(a3);
30             aSet.play(a2).with(a4);
31             
32             aSet.start();

效果图:

5、布局背景动画

1 //改变主布局的背景实现动画效果
2             animator = ObjectAnimator.ofInt(linearLayout,"backgroundColor",Color.WHITE,Color.BLUE,Color.GREEN,Color.RED);
3             //设置颜色值得差值类型
4             animator.setEvaluator(new ArgbEvaluator());
5             animator.setDuration(5000);
6             animator.setRepeatCount(ValueAnimator.INFINITE);
7             animator.setRepeatMode(ValueAnimator.REVERSE);
8             animator.start();

效果图:

--------------------------------------------------------------------------------------------------------------------------------

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

布局的诡异bug合集+解决方法(更新中)

2886
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

813
来自专栏python3

tkinter -- Label颜色,长宽设置

891
来自专栏小白安全

JavaScript中style属性对照表

盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) bo...

2785
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

2158
来自专栏Android常用基础

自定义View(四)-动画- Interpolator与Evaluator

Interpolator插值器之前我们已经接触过了,而Evaluator好像我们还没有将,这是属性动画中俩个比较中的两个知识点,弄清楚它们有助于我们更好的使用与...

1662
来自专栏lonelydawn的前端猿区

绚丽的javascript拾色器(不兼容IE8及以下)

一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

3927
来自专栏前端知识分享

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

1773
来自专栏hbbliyong

ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

3578
来自专栏天天

20171020

1022

扫码关注云+社区