最近工作不是很忙,一直在看跟技术有关的各种资料,丰富一下自己的知识,提高一下自己的水平,今天上了一下csdn看郭霖老师(移动开发博客专家)的博客,发现哎呀妈呀,换了头像,虽然看博客知道郭霖老师要结婚了,但是换头像高调秀恩爱还是给了我一个惊喜,看着漂亮的新娘子,想起了郭冬临的一句话:他那么磕碜,怎么就看上他了呢...
当然这是开玩笑,看了郭霖老师的博客两年了,心里还是很有感触的,所以忍不住把郭霖老师和张鸿洋老师(移动开发博客专家,而且也换了结婚照头像,果然与郭霖老师基友情深)的博客又随意翻了一下,于是拿张鸿洋的老师的很早写的一个博客作为参考,写一点自己的东西,作为纪念。
先看一张效果图,这是从张鸿洋老师的博客里复制的
大概就是按下的时候缩小,抬起的时候恢复到正常的大小的一个简单的效果。对这篇博客感兴趣的可以点击链接
(http://blog.csdn.net/lmj623565791/article/details/23441455)。
说一下张鸿洋老师的整篇博客的思路(估计现在老师肯定不会这么实现了):
1、写一个简单的算法,得到控件大小上的缩放比例梯度变化值。
2、在onTouchEvent方法里,按下时通过handler机制,设置图片的matrix的缩放值。
我看博客有翻看评论的习惯,因为每个人的思考角度不同,会提出有趣的,可能实现起来更好的方案。其中有最近有一条评论:如果用属性动画实现不是更简单吗?稍微思考一下,这确实是个好办法,在这个效果中,属性动画更简单,并且代码量也会少很多,基本不需要做什么维护工作,最近也有在复习属性动画,于是决定自己来通过属性动画来实现这个效果。
先贴出最初版本的代码
package com.example.scaleview;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
* 一个简单的View,只是为了测试按下和抬起的动画
* */
public class ScaleView extends View {
private static final int DURATION = 100;
private Paint paint;
/**
* 缩小的动画
* */
private ObjectAnimator scaleDownAnim;
/**
* 放大的动画
* */
private ObjectAnimator scaleUpAnim;
public ScaleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint = new Paint();
}
public ScaleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleView(Context context) {
this(context, null);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 如果是先画出形状,是画不出颜色的
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
canvas.drawColor(android.R.color.black);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
showScaleDownAnimation();
break;
case MotionEvent.ACTION_UP:
showScaleUpAnimation();
break;
default:
break;
}
return true;
}
/**
* 按下缩放的动画
* */
private void showScaleDownAnimation() {
float scaleXFrom = 1.0f;
float scaleYFrom = 1.0f;
// 宽度的变化
PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",
scaleXFrom, 0.8f);
// 高度的变化
PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",
scaleYFrom, 0.8f);
if (scaleDownAnim == null) {
scaleDownAnim = ObjectAnimator.ofPropertyValuesHolder(this,
scaleXP, scaleYP).setDuration(DURATION);
} else {
scaleDownAnim.setValues(scaleXP, scaleYP);
}
scaleDownAnim.start();
}
/**
* 抬起恢复大小的动画
* */
private void showScaleUpAnimation() {
float scaleXFrom = 0.8f;
float scaleYFrom = 0.8f;
// 宽度的变化
PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",
scaleXFrom, 1.0f);
// 高度的变化
PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",
scaleYFrom, 1.0f);
if (scaleUpAnim == null) {
scaleUpAnim = ObjectAnimator.ofPropertyValuesHolder(this, scaleXP,
scaleYP).setDuration(DURATION);
} else {
scaleUpAnim.setValues(scaleXP, scaleYP);
}
scaleUpAnim.start();
}
}
代码很简单,没有什么可以具体说明的技术点。但是会有一个问题,例如一个非常蛋疼的情况,连续不停的点击,这个效果就会变得有些卡顿,体验会很差,因为有时按下的动画还没有结束,抬起的动画就开始了,或者抬起的动画还没结束,按下的动画又开始了,两个动画在时间上互相出现了冲突,产生了上面的问题。
于是修改了最终版:
package com.example.scaleview;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
* 一个简单的View,只是为了测试按下和抬起的动画
* */
public class ScaleView extends View {
private static final int DURATION = 100;
private Paint paint;
/**
* 缩小的动画
* */
private ObjectAnimator scaleDownAnim;
/**
* 放大的动画
* */
private ObjectAnimator scaleUpAnim;
public ScaleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint = new Paint();
}
public ScaleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleView(Context context) {
this(context, null);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 如果是先画出形状,是画不出颜色的
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
canvas.drawColor(android.R.color.black);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
showScaleDownAnimation();
break;
case MotionEvent.ACTION_UP:
showScaleUpAnimation();
break;
default:
break;
}
return true;
}
/**
* 按下缩放的动画
* */
private void showScaleDownAnimation() {
float scaleXFrom = 1.0f;
float scaleYFrom = 1.0f;
// 如果抬起的动画还没有结束,获取当前的缩放的比例作为按下动画的缩放开始的值
if (scaleUpAnim != null && scaleUpAnim.isRunning()) {
scaleXFrom = (Float) scaleUpAnim.getAnimatedValue();
scaleYFrom = (Float) scaleUpAnim.getAnimatedValue();
// 停止抬起的动画
scaleUpAnim.end();
}
// 宽度的变化
PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",
scaleXFrom, 0.8f);
// 高度的变化
PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",
scaleYFrom, 0.8f);
if (scaleDownAnim == null) {
scaleDownAnim = ObjectAnimator.ofPropertyValuesHolder(this,
scaleXP, scaleYP).setDuration(DURATION);
} else {
scaleDownAnim.setValues(scaleXP, scaleYP);
}
scaleDownAnim.start();
}
/**
* 抬起恢复大小的动画
* */
private void showScaleUpAnimation() {
float scaleXFrom = 0.8f;
float scaleYFrom = 0.8f;
// 如果按下的动画还没有结束,获取当前的缩放的比例作为按下动画的缩放开始的值
if (scaleDownAnim != null && scaleDownAnim.isRunning()) {
scaleXFrom = (Float) scaleDownAnim.getAnimatedValue();
scaleYFrom = (Float) scaleDownAnim.getAnimatedValue();
// 停止按下的动画
scaleDownAnim.end();
}
// 宽度的变化
PropertyValuesHolder scaleXP = PropertyValuesHolder.ofFloat("scaleX",
scaleXFrom, 1.0f);
// 高度的变化
PropertyValuesHolder scaleYP = PropertyValuesHolder.ofFloat("scaleY",
scaleYFrom, 1.0f);
if (scaleUpAnim == null) {
scaleUpAnim = ObjectAnimator.ofPropertyValuesHolder(this, scaleXP,
scaleYP).setDuration(DURATION);
} else {
scaleUpAnim.setValues(scaleXP, scaleYP);
}
scaleUpAnim.start();
}
}
修改的地方就是在两个显示动画的方法里,增加了判断,如果之前的动画还没有结束,获取这个动画当前的比例作为自己的缩放的开始比例,然后把之前的动画停掉。
其中有两个方法简单说明一下:
得到属性动画的当前的变化值
Float scaleXFrom = (Float) scaleDownAnim.getAnimatedValue();
强转的类型就是我们之前设置的类型,例如ofFloat(), ofInt()
属性动画的end()方法
这个方法从单词看上去似乎是让动画直接回到最终状态,实际上是停留到当前状态,不再变化。
PS:
1、不知道有没有少年跟我一样会担心,如果view缩放了,在他上面的View会不会掉下来,就会显得很难看,我试了一下是不会的。
2、为什么这种缩放是以中心点缩放,是默认的吗,有知道的少年,希望可以留言一下。
3、还有一点被不知道谁的手机铃声“咱们结婚吧”,一下子给我弄忘了,想起来了再补上...
最后还是非常的推荐郭霖老师和张鸿洋老师的博客,而且在其他学习网站上都有他们录制的教学视频,都非常有学习的价值。
如果对属性动画了解不多的少年,可以去两位老师的博客查看相关资料,都有很详细的介绍和使用demo。
这样这篇博客差不多就要结束了,和参考的老师的博客的代码对比一下,很明显少了很多,而且看起来更工整,实现逻辑也很简单,几乎不用担心会出现什么bug。第一次写博客,编辑工具录屏软件都不会用,就不要挑我的毛病了。
希望两位老师新婚快乐,基友情深,我也应该向他们学习,偶尔写个博客分享一下自己的收获。