设为首页 加入收藏

TOP

Android动效篇:一个绚丽的Loading动效分析与实现(二)
2015-08-31 21:23:45 来源: 作者: 【 】 浏览:64
Tags:Android 一个 绚丽 Loading 分析 实现
的,产生一种错落的效果,既然如此,我们给叶子定义一个Type,根据Type 确定不同的振幅;


我们创建一个叶子对象:


? private class Leaf {


? ? ? ? // 在绘制部分的位置
? ? ? ? float x, y;
? ? ? ? // 控制叶子飘动的幅度
? ? ? ? StartType type;
? ? ? ? // 旋转角度
? ? ? ? int rotateAngle;
? ? ? ? // 旋转方向--0代表顺时针,1代表逆时针
? ? ? ? int rotateDirection;
? ? ? ? // 起始时间(ms)
? ? ? ? long startTime;
? ? }


类型采用枚举进行定义,其实就是用来区分不同的振幅:


? ? private enum StartType {
? ? ? ? LITTLE, MIDDLE, BIG
? ? }


创建一个LeafFactory类用于创建一个或多个叶子信息:


? ? private class LeafFactory {
? ? ? ? private static final int MAX_LEAFS = 6;
? ? ? ? Random random = new Random();


? ? ? ? // 生成一个叶子信息
? ? ? ? public Leaf generateLeaf() {
? ? ? ? ? ? Leaf leaf = new Leaf();
? ? ? ? ? ? int randomType = random.nextInt(3);
? ? ? ? ? ? // 随时类型- 随机振幅
? ? ? ? ? ? StartType type = StartType.MIDDLE;
? ? ? ? ? ? switch (randomType) {
? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? type = StartType.LITTLE;
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? type = StartType.BIG;
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? leaf.type = type;
? ? ? ? ? ? // 随机起始的旋转角度
? ? ? ? ? ? leaf.rotateAngle = random.nextInt(360);
? ? ? ? ? ? // 随机旋转方向(顺时针或逆时针)
? ? ? ? ? ? leaf.rotateDirection = random.nextInt(2);
? ? ? ? ? ? // 为了产生交错的感觉,让开始的时间有一定的随机性
? ? ? ? ? ? mAddTime += random.nextInt((int) (LEAF_FLOAT_TIME * 1.5));
? ? ? ? ? ? leaf.startTime = System.currentTimeMillis() + mAddTime;
? ? ? ? ? ? return leaf;
? ? ? ? }


? ? ? ? // 根据最大叶子数产生叶子信息
? ? ? ? public List generateLeafs() {
? ? ? ? ? ? return generateLeafs(MAX_LEAFS);
? ? ? ? }


? ? ? ? // 根据传入的叶子数量产生叶子信息
? ? ? ? public List generateLeafs(int leafSize) {
? ? ? ? ? ? List leafs = new LinkedList();
? ? ? ? ? ? for (int i = 0; i < leafSize; i++) {
? ? ? ? ? ? ? ? leafs.add(generateLeaf());
? ? ? ? ? ? }
? ? ? ? ? ? return leafs;
? ? ? ? }
? ? }


定义两个常亮分别记录中等振幅和之间的振幅差:


? ? // 中等振幅大小
? ? private static final int MIDDLE_AMPLITUDE = 13;
? ? // 不同类型之间的振幅差距
? ? private static final int AMPLITUDE_DISPARITY = 5;



? ? // 中等振幅大小
? ? private int mMiddleAmplitude = MIDDLE_AMPLITUDE;
? ? // 振幅差
? ? private int mAmplitudeDisparity = AMPLITUDE_DISPARITY;


有了以上信息,我们则可以获取到叶子的Y值:


? ? // 通过叶子信息获取当前叶子的Y值
? ? private int getLocationY(Leaf leaf) {
? ? ? ? // y = A(wx+Q)+h
? ? ? ? float w = (float) ((float) 2 * Math.PI / mProgressWidth);
? ? ? ? float a = mMiddleAmplitude;
? ? ? ? switch (leaf.type) {
? ? ? ? ? ? case LITTLE:
? ? ? ? ? ? ? ? // 小振幅 = 中等振幅 - 振幅差
? ? ? ? ? ? ? ? a = mMiddleAmplitude - mAmplitudeDisparity;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case MIDDLE:
? ? ? ? ? ? ? ? a = mMiddleAmplitude;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case BIG:
? ? ? ? ? ? ? ? // 小振幅 = 中等振幅 + 振幅差
? ? ? ? ? ? ? ? a = mMiddleAmplitude + mAmplitudeDisparity;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? default:
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x);
? ? ? ? return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3;
? ? }


接下来,我们开始绘制叶子:


? ? /**
? ? * 绘制叶子
? ? *
? ? * @param canvas
? ? */
? ? private void drawLeafs(Canvas canvas) {
? ? ? ? long currentTime = System.currentTimeMillis();
? ? ? ? for (int i = 0; i < mLeafInfos.size(); i++) {
? ? ? ? ? ? Leaf leaf = mLeafInfos.get(i);
? ? ? ? ? ? if (currentTime > leaf.startTime && leaf.startTime != 0) {
? ? ? ? ? ? ? ? // 绘制叶子--根据叶子的类型和当前时间得出叶子的(x,y)
? ? ? ? ? ? ? ? getLeafLocation(leaf, currentTime);
? ? ? ? ? ? ? ? // 根据时间计算旋转角度
? ? ? ? ? ? ? ? canvas.save();
? ? ? ? ? ? ? ? // 通过Matrix控制叶子旋转
? ? ? ? ? ? ? ? Matrix matrix = new Matrix();
? ? ? ? ? ? ? ? float transX = mLeftMargin + leaf.x;
? ? ? ? ? ? ? ? float transY = mLeftMargin + leaf.y;
? ? ? ? ? ? ? ? Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
? ? ? ? ? ? ? ? matrix.postTranslate(transX, transY);
? ? ? ? ? ? ? ? // 通过时间关联旋转角度,则可以直接通过修改LEAF_ROTATE_TIME调节叶子旋转快慢
? ? ? ? ? ? ? ? float rotateFraction = ((currentTime - leaf.startTime) % LEAF_ROTATE_TIME)
? ? ? ? ? ? ? ? ? ? ? ? / (float) LEAF_ROTATE_TI

首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇深入讲解Android中Activity launc.. 下一篇Android使用SVG矢量图打造酷炫动..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: