Twitter的like动画安卓版 - 备选方案

2023-10-27

英文： Twitter’s like animation in Android - alternative
相关动画网址：http://frogermcs.github.io/twitters-like-animation-in-android-alternative/，
更多动画网址：http://frogermcs.github.io/
作者来源：Miroslaw Stanek

小编自己遇到的问题：最近在研究一个Twitter的like动画安卓版，在任何手机上面都可以正常播放动画，只有在一个htc的手机上面，没有任何错误日志，动画播放不出来
操作：设置–》开发者选择–》高级选项–》动画，把动画的选项打开就好了。

不久前Twitter展示了具有现代感的心形动画－作为star图标的替代。

虽然实现这个动画最简单的方法是使用 Frame Animation ，但是我们尝试用更灵活的方法来实现－手动绘制并用属性动画。这篇文章只是概要，没有深入的技术细节

一：实现

我们将创建一个名叫LikeButtonView的view，它是一个由三个子view构成的FrameLayout－ CircleView 显示星星图标下面的圆，ImageView （星星）以及代表按钮周围浮点的DotsView 。

CircleView

这个视图负责绘制星星图标下面的大圆。它本可以实现得更简单（通过xml ），但是这里我们应该考虑按钮下面的背景颜色。

我们在canvas上绘制圆的实现：

Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    tempCanvas.drawColor(0xffffff, PorterDuff.Mode.CLEAR);
    tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, outerCircleRadiusProgress * maxCircleSize, circlePaint);
    tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, innerCircleRadiusProgress * maxCircleSize, maskPaint);
    canvas.drawBitmap(tempBitmap, 0, 0, null);
}

先使用CLEAR 模式绘制颜色以清除canvas。然后根据给定的进度（各自的进度是独立的）绘制内外圆。

内圆使用这样定义的mask paint ：

Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    maxCircleSize = w / 2;
    tempBitmap = Bitmap.createBitmap(getWidth(), getWidth(), Bitmap.Config.ARGB_8888);
    tempCanvas = new Canvas(tempBitmap);
}

我们需要完全透明，不然的话内圆就会显示窗口颜色。

对于那些眼睛机灵的人应该还注意到了另外一件事－我们的外圆颜色是基于当前进度而变化的。这是通过 ArgbEvaluator 类来完成，该类可以基于一个给定的因子在两个颜色之间变换：

private void updateCircleColor() {
    float colorProgress = (float) Utils.clamp(outerCircleRadiusProgress, 0.5, 1);
    colorProgress = (float) Utils.mapValueFromRangeToRange(colorProgress, 0.5f, 1f, 0f, 1f);
    this.circlePaint.setColor((Integer) argbEvaluator.evaluate(colorProgress, START_COLOR, END_COLOR));
}

三：DotsView

这个view将绘制浮动在星星图标周围的圆点。跟CircleView一样，它是使用onDraw()来做这件事的：

protected void onDraw(Canvas canvas) {
    drawOuterDotsFrame(canvas);
    drawInnerDotsFrame(canvas);
}

private void drawOuterDotsFrame(Canvas canvas) {
    for (int i = 0; i < DOTS_COUNT; i++) {
        int cX = (int) (centerX + currentRadius1 * Math.cos(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));
        int cY = (int) (centerY + currentRadius1 * Math.sin(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));
        canvas.drawCircle(cX, cY, currentDotSize1, circlePaints[i % circlePaints.length]);
    }
}

private void drawInnerDotsFrame(Canvas canvas) {
    for (int i = 0; i < DOTS_COUNT; i++) {
        int cX = (int) (centerX + currentRadius2 * Math.cos((i * OUTER_DOTS_POSITION_ANGLE - 10) * Math.PI / 180));
        int cY = (int) (centerY + currentRadius2 * Math.sin((i * OUTER_DOTS_POSITION_ANGLE - 10) * Math.PI / 180));
        canvas.drawCircle(cX, cY, currentDotSize2, circlePaints[(i + 1) % circlePaints.length]);
    }
}

圆点是基于currentProgress绘制的，背后是数学逻辑，老实说从安卓sdk的角度来看这里没有什么有趣的地方，倒是有两个跟数学相关的东西：

圆点分布在一个圆上－它们的位置决定于:

int cX = (int) (centerX + currentRadius1 * Math.cos(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));

int cY = (int) (centerY + currentRadius1 * Math.sin(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));

意味着：在每个 OUTER_DOTS_POSITION_ANGLE 上设置圆点 (51 度).

每个圆点都有它自己的颜色动画：

private void updateDotsPaints() {
    if (currentProgress < 0.5f) {
        float progress = (float) Utils.mapValueFromRangeToRange(currentProgress, 0f, 0.5f, 0, 1f);
        circlePaints[0].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_1, COLOR_2));
        circlePaints[1].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_2, COLOR_3));
        circlePaints[2].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_3, COLOR_4));
        circlePaints[3].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_4, COLOR_1));
    } else {
        float progress = (float) Utils.mapValueFromRangeToRange(currentProgress, 0.5f, 1f, 0, 1f);
        circlePaints[0].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_2, COLOR_3));
        circlePaints[1].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_3, COLOR_4));
        circlePaints[2].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_4, COLOR_1));
        circlePaints[3].setColor((Integer) argbEvaluator.evaluate(progress, COLOR_1, COLOR_2));
    }
}

这意味着圆点颜色在3个区间形式的值之间动画。我们再一次使用ArgbEvaluator 让它平滑。其余就很简单了
CircleView完整代码

package com.loveta.umengexample;

import android.animation.ArgbEvaluator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Android

动画