转载自:http://www.icodelogic.com/?p=616
产品需求中有一个动画效果:TextureView按照曲线路径进行移动,并且同时做Scale和Alpha变化。当然,同时
进行多个动画只需要使用AnimationSet就行了,但是对于”曲线”这样的移动效果,只能采用多个TranslateAnimation来顺序进行以模拟曲线的效果了。这样的实现方式没有问题,但是仔细观察实际效果却发现,在连续两个动画进行过程中,第一个动画结束到第二个动画开始,TextureView会出现瞬间的停止,然后才会进行第二个动画,也就是会”卡”一下,这样的效果就不太理想了。
没办法,只能实现一个自定义动画,即在一个Animation中实现View的曲线移动。
浏览一下Animation的代码,可以发现有applyTransformation这样一个接口,这个接口的作用就是提供一个转换矩阵来对View进行变换,矩阵变换的原理在以前介绍的图像处理的文章中介绍过,这里就不再赘述,而且我们需要使用的Matrix的功能:如位移、大小等,都有响应的接口可以直接使用,很方便。
下面看看一个简单的自定义动画的实现:为了方便定义动画的状态(也可以成为”关键帧”),我们简单定义一个类:
1 2 3 4 5 6 7 8 9 |
public class AnimationStatus { public float X = 0; public float Y = 0; public float Scale_X = 1; public float Scale_Y = 1; public float Alpha = 1; public float Time = 0; } |
然后是继承自Animation的ExtAnimation对象,主要的接口和代码如下:
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
public class ExtAnimation extends Animation { // 保存动画的关键帧 private List<AnimationStatus> mAniList = new ArrayList<AnimationStatus>(); public ViewSwitchAnimation() { this.setFillAfter(true); this.setFillEnabled(true); this.setDuration(1000); } // 添加一个关键帧(添加时Status请按Time排好序) public void addStatus(AnimationStatus status, float timepoint) { keyStatus.Time = timepoint; mAniList.add(status); } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); } // 最重要的方法 @Override protected void applyTransformation(float interpolatedTime, Transformation t) { if (mAniList.size() < 1) return; int index1 = 0; int index2 = 1; for (int i = 0; i < mAniList.size() - 1; ++i) { if (interpolatedTime >= mAniList.get(i).Time && interpolatedTime <= mAniList.get(i + 1).Time) { index1 = i; index2 = i + 1; break; } } // 在keyStatus1和keyStatus2指定的状态之间做动画 AnimationStatus keyStatus1 = mAniList.get(index1); AnimationStatus keyStatus2 = mAniList.get(index2); if (keyStatus1 == null || keyStatus2 == null) return; // 取得当前变换矩阵 Matrix matrix = t.getMatrix(); // 调整透明度 float alpha1 = keyStatus1.Alpha; float alpha2 = keyStatus2.Alpha; t.setAlpha(alpha1 + (alpha2 - alpha1) * (offset_time) / timeTotal); // 调整位移 float x1 = keyStatus1.X; float y1 = keyStatus1.Y; float x2 = keyStatus2.X; float y2 = keyStatus2.Y; matrix.preTranslate(x1 + (x2 - x1) * offset_time / timeTotal, y1 + (y2 - y1) * offset_time / timeTotal); // 调整大小 float sx1 = keyStatus1.Scale_X; float sy1 = keyStatus1.Scale_Y; float sx2 = keyStatus2.Scale_X; float sy2 = keyStatus2.Scale_Y; matrix.preScale(sx1 + (sx2 - sx1) * offset_time / timeTotal, sy1 + (sy2 - sy1) * offset_time / timeTotal); } } |
以上就是一个最简单的自定义动画,我们可以连续加入任意多个AnimationStatus来指定动画的关键状态,比如(0,0,1,1,1) –> (10,50,1.5f,1.5f,0.5f)–>(10,-50,2,2,0),表示从初始状态,首先移动到(10,50)坐标处并且长宽变大1.5倍、Alpha变成0.5;然后再次移动到(10,-50)坐标处并且长宽变为2倍、Alpha变成0。 这样实现的好处在于,跟两个AnimationSet顺序执行相比,消除了AniamtionSet切换时的”卡顿”现象,整个动画流程将流畅很多。
当然,上述的实现中,在每两个关键帧之间的动画,采取的只是简单的线性函数,即按照时间(interpolatedTime)变量的一元一次方程,其实我们可以采用更复杂的计算函数(变量为interpolatedTime)来计算每一次的位移等,从而可以实现任何复杂的动画曲线。