[Material Design] MaterialButton 效果进阶 动画自动移动进行对齐效果
2014-10-12 08:35
549 查看
原创作品,转载请注明出处:/article/1531505.html
做 Android 动画效果一段时间了,感觉深深喜欢上了钻研特效。在手机上显示自己的特效是一件很不错的事情。
废话不多说,前面几天我发布了:[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)
在其中我讲解了我对 Android L 中 Material 效果的按钮的动画实现方式,今天的文章将基于其上进行进阶讲解新的特效。
在 MaterialButton 中的特效原理是:用户点击时启动一个动画,该动画是在点击位置画颜色渐变同时半径变大的圆,从而实现扩散效果;具体可点击上面的链接查看一下。在按钮中的这样的特效距离谷歌的还是有很大的差距的,下面来对比一下:
官方的:
我们上个版本的:
可以看出谷歌的是有位移效果,而我们的是原地扩散的效果,当然动画速度这个与PS的设置有关,不做比较,实际速度比上面的略快。
下面咱们就来试试做做位移的特效,先画个图给大家看看:
相信大家都能看懂,第一种就是之前的实现方式,只是在原地扩散,第二种就是新的,将在扩散的同时向中心靠拢,且为了达到更加好的视觉效果,靠拢中心的XY轴速度并不是一样的,X轴的靠拢时间=整个扩散时间,向Y轴靠拢的时间~=整个扩散时间*0.3(且都是先快后慢),现在来看看成品效果:
点击中间的时候与第一种差距不大,但是点击两边的时候将会有明显的差距,能感觉到向中心靠拢的触觉。是不是和谷歌的相比起来又近了一些了?
说了这个多的理论与演示,下面来说说整个的实现:
首先我们抽取上一篇文章的成果作为这篇的开头,具体怎么新建控件就不再做介绍了,先看看上一篇的代码成果(该代码进行了一定的修改):
现在基于此开工!
首先我们建立 两个新的属性 分别X坐标与Y坐标属性:
之后我们获取到高宽 以及根据高和宽 计算出对应的 开始半径与结束半径:
第二步,我们把开始长度除以2 得出其一半的长度 然后与 点击时的Y轴坐标比较,如果Y轴较长则取Y,如果不够则取其相减结果。这样能保证点击开始时的半径能刚好大于其高或者宽(短的一边),这样就不会出现小圆扩散的效果,看起来将会由椭圆的效果(当然以后将会直接画出椭圆)
第三步,我们运算出结束半径,同时保证结束半径为长的一边的一半的8/10 这样的效果是不会出现布满整个控件的情况。8/10 的空间刚好是个不错的选择。
第四步,判断开始长度是否大于结束长度,如果是(近似正方形情况),进行一定规则的重新运算,保证其开始半径能刚好与控件长度差不多(0.48左右),结束半径能刚刚布满控件,同时减少动画时间
当然,我现在才发现了一个BUG,在第二步的地方的BUG,大家看看,希望能提出是哪里的BUG;就当是一个互动!该BUG将会在下个版本修复。
之后我们建立每个属性的动画,并给每个属性动画设置对应的时间:
可以看见Y轴的时间乘以了一个speed变量,该变量默认是0.3 如果是近似正方形将初始化为1以便能同时对齐到中心位置,在上一步中有对应变量。
然后咱们把所有的属性动画添加到一个动画集并设置其速度方式为:先快后慢。最后启动该动画集。
以上就是最新的动画效果的实现原理及代码了,当然我们可以将其合并到第一篇的代码中,并使用一个 Bool 属性来控制使用哪一种动画:
在最后附上两种方式运行后的效果对比图:
还不错吧?要是感觉比较和你的胃口,这里有我的整个项目:
Genius-Android
APK与动画MP4
最新文章终极解决方案(2015-01-07):
打造极致Material Design动画风格Button
做 Android 动画效果一段时间了,感觉深深喜欢上了钻研特效。在手机上显示自己的特效是一件很不错的事情。
废话不多说,前面几天我发布了:[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)
在其中我讲解了我对 Android L 中 Material 效果的按钮的动画实现方式,今天的文章将基于其上进行进阶讲解新的特效。
在 MaterialButton 中的特效原理是:用户点击时启动一个动画,该动画是在点击位置画颜色渐变同时半径变大的圆,从而实现扩散效果;具体可点击上面的链接查看一下。在按钮中的这样的特效距离谷歌的还是有很大的差距的,下面来对比一下:
官方的:
我们上个版本的:
可以看出谷歌的是有位移效果,而我们的是原地扩散的效果,当然动画速度这个与PS的设置有关,不做比较,实际速度比上面的略快。
下面咱们就来试试做做位移的特效,先画个图给大家看看:
相信大家都能看懂,第一种就是之前的实现方式,只是在原地扩散,第二种就是新的,将在扩散的同时向中心靠拢,且为了达到更加好的视觉效果,靠拢中心的XY轴速度并不是一样的,X轴的靠拢时间=整个扩散时间,向Y轴靠拢的时间~=整个扩散时间*0.3(且都是先快后慢),现在来看看成品效果:
点击中间的时候与第一种差距不大,但是点击两边的时候将会有明显的差距,能感觉到向中心靠拢的触觉。是不是和谷歌的相比起来又近了一些了?
说了这个多的理论与演示,下面来说说整个的实现:
首先我们抽取上一篇文章的成果作为这篇的开头,具体怎么新建控件就不再做介绍了,先看看上一篇的代码成果(该代码进行了一定的修改):
public class MaterialButton extends Button { private static final Interpolator ANIMATION_INTERPOLATOR = new DecelerateInterpolator(); private static final long ANIMATION_TIME = 600; private Paint backgroundPaint; private static ArgbEvaluator argbEvaluator = new ArgbEvaluator(); private float paintX, paintY, radius; public MaterialButton(Context context) { super(context); init(null, 0); } public MaterialButton(Context context, AttributeSet attrs) { super(context, attrs); init(attrs, 0); } public MaterialButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(attrs, defStyle); } @SuppressWarnings("deprecation") private void init(AttributeSet attrs, int defStyle) { ... } @SuppressWarnings("NullableProblems") @Override protected void onDraw(Canvas canvas) { canvas.save(); canvas.drawCircle(paintX, paintY, radius, backgroundPaint); canvas.restore(); super.onDraw(canvas); } @SuppressWarnings("NullableProblems") @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { paintX = event.getX(); paintY = event.getY(); startRoundAnimator(); } return super.onTouchEvent(event); } /** * ============================================================================================= * The Animator methods * ============================================================================================= */ /** * Start Round Animator */ private void startRoundAnimator() { float start, end, height, width; long time = (long) (ANIMATION_TIME * 1.85); //Height Width height = getHeight(); width = getWidth(); //Start End if (height < width) { start = height; end = width; } else { start = width; end = height; } float startRadius = (start / 2 > paintY ? start - paintY : paintY) * 1.15f; float endRadius = (end / 2 > paintX ? end - paintX : paintX) * 0.85f; //If The approximate square approximate square if (startRadius > endRadius) { startRadius = endRadius * 0.6f; endRadius = endRadius / 0.8f; time = (long) (time * 0.5); } AnimatorSet set = new AnimatorSet(); set.playTogether( ObjectAnimator.ofFloat(this, mRadiusProperty, startRadius, endRadius), ObjectAnimator.ofObject(this, mBackgroundColorProperty, argbEvaluator, attributes.getColor(1), attributes.getColor(2)) ); // set Time set.setDuration((long) (time / end * endRadius)); set.setInterpolator(ANIMATION_INTERPOLATOR); set.start(); } /** * ============================================================================================= * The custom properties * ============================================================================================= */ private Property<MaterialButton, Float> mRadiusProperty = new Property<MaterialButton, Float>(Float.class, "radius") { @Override public Float get(MaterialButton object) { return object.radius; } @Override public void set(MaterialButton object, Float value) { object.radius = value; invalidate(); } }; private Property<MaterialButton, Integer> mBackgroundColorProperty = new Property<MaterialButton, Integer>(Integer.class, "bg_color") { @Override public Integer get(MaterialButton object) { return object.backgroundPaint.getColor(); } @Override public void set(MaterialButton object, Integer value) { object.backgroundPaint.setColor(value); } }; }在上述代码中我们实现了点击时进行扩散的效果,初始化控件部分由于我加入了许多的代码这里删除了,具体可以看看我的项目实现,最后会给出地址。
现在基于此开工!
首先我们建立 两个新的属性 分别X坐标与Y坐标属性:
private Property<MaterialButton, Float> mPaintXProperty = new Property<MaterialButton, Float>(Float.class, "paintX") { @Override public Float get(MaterialButton object) { return object.paintX; } @Override public void set(MaterialButton object, Float value) { object.paintX = value; } }; private Property<MaterialButton, Float> mPaintYProperty = new Property<MaterialButton, Float>(Float.class, "paintY") { @Override public Float get(MaterialButton object) { return object.paintY; } @Override public void set(MaterialButton object, Float value) { object.paintY = value; } };在这两个属性中并未调用第一篇所说的 “ invalidate();”方法进行界面刷新,因为该方法应该放在持续时间最长的半径属性中调用。
之后我们获取到高宽 以及根据高和宽 计算出对应的 开始半径与结束半径:
<span style="white-space:pre"> </span>float start, end, height, width, speed = 0.3f; long time = ANIMATION_TIME; //Height Width height = getHeight(); width = getWidth(); //Start End if (height < width) { start = height; end = width; } else { start = width; end = height; } start = start / 2 > paintY ? start - paintY : paintY; end = end * 0.8f / 2f; //If The approximate square approximate square if (start > end) { start = end * 0.6f; end = end / 0.8f; time = (long) (time * 0.65); speed = 1f; }我们首先比较了高与宽的长度 把短的赋予为开始半径 长的赋予为结束半径。
第二步,我们把开始长度除以2 得出其一半的长度 然后与 点击时的Y轴坐标比较,如果Y轴较长则取Y,如果不够则取其相减结果。这样能保证点击开始时的半径能刚好大于其高或者宽(短的一边),这样就不会出现小圆扩散的效果,看起来将会由椭圆的效果(当然以后将会直接画出椭圆)
第三步,我们运算出结束半径,同时保证结束半径为长的一边的一半的8/10 这样的效果是不会出现布满整个控件的情况。8/10 的空间刚好是个不错的选择。
第四步,判断开始长度是否大于结束长度,如果是(近似正方形情况),进行一定规则的重新运算,保证其开始半径能刚好与控件长度差不多(0.48左右),结束半径能刚刚布满控件,同时减少动画时间
当然,我现在才发现了一个BUG,在第二步的地方的BUG,大家看看,希望能提出是哪里的BUG;就当是一个互动!该BUG将会在下个版本修复。
之后我们建立每个属性的动画,并给每个属性动画设置对应的时间:
<span style="white-space:pre"> </span>//PaintX ObjectAnimator aPaintX = ObjectAnimator.ofFloat(this, mPaintXProperty, paintX, width / 2); aPaintX.setDuration(time); //PaintY ObjectAnimator aPaintY = ObjectAnimator.ofFloat(this, mPaintYProperty, paintY, height / 2); aPaintY.setDuration((long) (time * speed)); //Radius ObjectAnimator aRadius = ObjectAnimator.ofFloat(this, mRadiusProperty, start, end); aRadius.setDuration(time); //Background ObjectAnimator aBackground = ObjectAnimator.ofObject(this, mBackgroundColorProperty, argbEvaluator, attributes.getColor(1), attributes.getColor(2)); aBackground.setDuration(time);
可以看见Y轴的时间乘以了一个speed变量,该变量默认是0.3 如果是近似正方形将初始化为1以便能同时对齐到中心位置,在上一步中有对应变量。
然后咱们把所有的属性动画添加到一个动画集并设置其速度方式为:先快后慢。最后启动该动画集。
//AnimatorSet AnimatorSet set = new AnimatorSet(); set.playTogether(aPaintX, aPaintY, aRadius, aBackground); set.setInterpolator(ANIMATION_INTERPOLATOR); set.start();
以上就是最新的动画效果的实现原理及代码了,当然我们可以将其合并到第一篇的代码中,并使用一个 Bool 属性来控制使用哪一种动画:
public class MaterialButton extends Button {
private static final Interpolator ANIMATION_INTERPOLATOR = new DecelerateInterpolator();
private static final long ANIMATION_TIME = 600;
private Paint backgroundPaint;
private static ArgbEvaluator argbEvaluator = new ArgbEvaluator();
private float paintX, paintY, radius;
private Attributes attributes;
public MaterialButton(Context context) {
super(context);
init(null, 0);
}
public MaterialButton(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public MaterialButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
@SuppressWarnings("deprecation")
private void init(AttributeSet attrs, int defStyle) {
...
}
@SuppressWarnings("NullableProblems")
@Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.drawCircle(paintX, paintY, radius, backgroundPaint);
canvas.restore();
super.onDraw(canvas);
}
@SuppressWarnings("NullableProblems")
@Override
public boolean onTouchEvent(MotionEvent event) {
if (attributes.isMaterial() && event.getAction() == MotionEvent.ACTION_DOWN) {
paintX = event.getX();
paintY = event.getY();
if (attributes.isAutoMove())
startMoveRoundAnimator();
else
startRoundAnimator();
}
return super.onTouchEvent(event);
}
/**
* =============================================================================================
* The Animator methods
* =============================================================================================
*/
/**
* Start Round Animator
*/
private void startRoundAnimator() {
float start, end, height, width;
long time = (long) (ANIMATION_TIME * 1.85);
//Height Width
height = getHeight();
width = getWidth();
//Start End
if (height < width) {
start = height;
end = width;
} else {
start = width;
end = height;
}
float startRadius = (start / 2 > paintY ? start - paintY : paintY) * 1.15f;
float endRadius = (end / 2 > paintX ? end - paintX : paintX) * 0.85f;
//If The approximate square approximate square
if (startRadius > endRadius) {
startRadius = endRadius * 0.6f;
endRadius = endRadius / 0.8f;
time = (long) (time * 0.5);
}
AnimatorSet set = new AnimatorSet();
set.playTogether(
ObjectAnimator.ofFloat(this, mRadiusProperty, startRadius, endRadius),
ObjectAnimator.ofObject(this, mBackgroundColorProperty, argbEvaluator, attributes.getColor(1), attributes.getColor(2))
);
// set Time
set.setDuration((long) (time / end * endRadius));
set.setInterpolator(ANIMATION_INTERPOLATOR);
set.start();
}
/**
* Start Move Round Animator
*/
private void startMoveRoundAnimator() {
float start, end, height, width, speed = 0.3f;
long time = ANIMATION_TIME;
//Height Width
height = getHeight();
width = getWidth();
//Start End
if (height < width) {
start = height;
end = width;
} else {
start = width;
end = height;
}
start = start / 2 > paintY ? start - paintY : paintY;
end = end * 0.8f / 2f;
//If The approximate square approximate square
if (start > end) {
start = end * 0.6f;
end = end / 0.8f;
time = (long) (time * 0.65);
speed = 1f;
}
//PaintX
ObjectAnimator aPaintX = ObjectAnimator.ofFloat(this, mPaintXProperty, paintX, width / 2);
aPaintX.setDuration(time);
//PaintY
ObjectAnimator aPaintY = ObjectAnimator.ofFloat(this, mPaintYProperty, paintY, height / 2);
aPaintY.setDuration((long) (time * speed));
//Radius
ObjectAnimator aRadius = ObjectAnimator.ofFloat(this, mRadiusProperty, start, end);
aRadius.setDuration(time);
//Background
ObjectAnimator aBackground = ObjectAnimator.ofObject(this, mBackgroundColorProperty, argbEvaluator, attributes.getColor(1), attributes.getColor(2));
aBackground.setDuration(time);
//AnimatorSet AnimatorSet set = new AnimatorSet(); set.playTogether(aPaintX, aPaintY, aRadius, aBackground); set.setInterpolator(ANIMATION_INTERPOLATOR); set.start();
}
/**
* =============================================================================================
* The custom properties
* =============================================================================================
*/
private Property<MaterialButton, Float> mPaintXProperty = new Property<MaterialButton, Float>(Float.class, "paintX") { @Override public Float get(MaterialButton object) { return object.paintX; } @Override public void set(MaterialButton object, Float value) { object.paintX = value; } }; private Property<MaterialButton, Float> mPaintYProperty = new Property<MaterialButton, Float>(Float.class, "paintY") { @Override public Float get(MaterialButton object) { return object.paintY; } @Override public void set(MaterialButton object, Float value) { object.paintY = value; } };
private Property<MaterialButton, Float> mRadiusProperty = new Property<MaterialButton, Float>(Float.class, "radius") {
@Override
public Float get(MaterialButton object) {
return object.radius;
}
@Override
public void set(MaterialButton object, Float value) {
object.radius = value;
invalidate();
}
};
private Property<MaterialButton, Integer> mBackgroundColorProperty = new Property<MaterialButton, Integer>(Integer.class, "bg_color") {
@Override
public Integer get(MaterialButton object) {
return object.backgroundPaint.getColor();
}
@Override
public void set(MaterialButton object, Integer value) {
object.backgroundPaint.setColor(value);
}
};
}
在最后附上两种方式运行后的效果对比图:
还不错吧?要是感觉比较和你的胃口,这里有我的整个项目:
Genius-Android
APK与动画MP4
最新文章终极解决方案(2015-01-07):
打造极致Material Design动画风格Button
相关文章推荐
- [Material Design] MaterialButton 效果进阶 动画自动移动进行对齐效果
- Android进阶——自定义View之继承系统控件实现自带删除按钮动画效果和软键盘自动悬浮于文本框下方
- js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- 使用DirectX让进行Alpha混合的子图形移动(精灵动画)
- WP7进阶技巧 自定义Toast 提示动画效果
- jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
- IE 下VML动画的奇怪现象:GWTCanvas基于定时器的图形动画当鼠标移动时停止动画效果(直接用VML写代码效果也一样)
- ios scrollView中增加动画效果,自动滚动UIScrollView,利用了NSTimer
- JavaScript_窗口移动动画效果示例;
- ViewAnimator 当进行视图切换时显示动画效果
- web中,要达到动画效果,每秒要移动多少像素呢?
- 图片的左右移动,js动画效果实现代码
- 对CCLabelTTF进行自动换行,显示打字效果(转)
- 连线自动路由算法:在GEF中实现连线的自动直角路由,智能避障并绕开模型,选择最佳路径进行布线,仿Visio效果
- 移动终端网页游戏移植研发框架【带动画效果控件隐藏的方法】
- VC实现图片移动(动画效果)
- 动态移动UI控件的位置并带有动画的效果
- 对CCLabelTTF进行自动换行,显示打字效果(转)
- 简单JS动画实例 广告移动效果