Android开发：这交互炸了！炫酷跳动的闪屏Logo标题

2. 所有文字需要随机打散在屏幕各个位置，因为涉及到坐标，我们可以在onSizeChanged中进行logo文字随机位置的初始化，同时我们构建两个集合存储每个文字被打散和组合后的坐标状态：

// 最终合成logo后的坐标

private SparseArray mQuietPoints = new SparseArray<>();

// logo被随机打散的坐标

private SparseArray mRadonPoints = new SparseArray<>();

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mWidth = w;

mHeight = h;

initLogoCoordinate();

}

private void initLogoCoordinate() {

float centerY = mHeight / 2f + mPaint.getTextSize() / 2 + mLogoOffset;

// calculate the final xy of the text

float totalLength = 0;

for (int i = 0; i < mLogoTexts.size(); i++) {

String str = mLogoTexts.get(i);

float currentLength = mPaint.measureText(str);

if (i != mLogoTexts.size() - 1) {

totalLength += currentLength + mTextPadding;

} else {

totalLength += currentLength;

}

}

// the draw width of the logo must small than the width of this AnimLogoView

if (totalLength > mWidth) {

throw new IllegalStateException(“This view can not display all text of logoName, please change text size.”);

}

float startX = (mWidth - totalLength) / 2;

if (mQuietPoints.size() > 0) {

mQuietPoints.clear();

}

for (int i = 0; i < mLogoTexts.size(); i++) {

String str = mLogoTexts.get(i);

float currentLength = mPaint.measureText(str);

mQuietPoints.put(i, new PointF(startX, centerY));

startX += currentLength + mTextPadding;

}

// generate random start xy of the text

if (mRadonPoints.size() > 0) {

mRadonPoints.clear();

}

// 构建随机初始坐标

for (int i = 0; i < mLogoTexts.size(); i++) {

mRadonPoints.put(i, new PointF((float) Math.random() * mWidth, (float) Math.random() * mHeight));

}

}

3. 构建动画过程，定义一个属性动画从0-1计算进度，在动画过程通过重绘实现文字从凌乱打散的坐标到最终组合坐标进行移动：

// init the translation animation

private void initOffsetAnimation() {

mOffsetAnimator = ValueAnimator.ofFloat(0, 1);

mOffsetAnimator.setDuration(mOffsetDuration);

mOffsetAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

mOffsetAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

if (mQuietPoints.size() <= 0 || mRadonPoints.size() <= 0) {

return;

}

mOffsetAnimProgress = (float) animation.getAnimatedValue();

invalidate();

}

});

}

@Override

protected void onDraw(Canvas canvas) {

if (!isOffsetAnimEnd) {// offset animation

mPaint.setAlpha((int) Math.min(255, 255 * mOffsetAnimProgress + 100));

for (int i = 0; i < mQuietPoints.size(); i++) {

PointF quietP = mQuietPoints.get(i);

PointF radonP = mRadonPoints.get(i);

float x = radonP.x + (quietP.x - radonP.x) * mOffsetAnimProgress;

float y = radonP.y + (quietP.y - radonP.y) * mOffsetAnimProgress;

canvas.drawText(mLogoTexts.get(i), x, y, mPaint);

}

}

}

4. 此时我们已经把logo文字动画实现了，接下来看我们拆解的第7步，还有个光照效果。对于这种光照效果，首选方案是通过Gradient+Shader实现。

因为绘制渐变也涉及到坐标，所以动画的初始化我们也放到了onSizeChanged中进行:

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mWidth = w;

mHeight = h;

initLogoCoordinate();// 初始化坐标动画

initGradientAnimation(w);// 初始化渐变动画

}

// init the gradient animation

private void initGradientAnimation(int width) {

mGradientAnimator = ValueAnimator.ofInt(0, 2 * width);

if (mGradientListener != null) {

mGradientAnimator.addListener(mGradientListener);

}

mGradientAnimator.setDuration(mGradientDuration);

mGradientAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mMatrixTranslate = (int) animation.getAnimatedValue();

invalidate();

}

});

mLinearGradient = new LinearGradient(-width, 0, 0, 0, new int[]{mTextColor, mGradientColor, mTextColor},

new float[]{0, 0.5f, 1}, Shader.TileMode.CLAMP);

mGradientMatrix = new Matrix();

}

5. 渐变动画是在文字移动动画结束后自动播放的，所以我们可以在初始化文字移动动画时对动画结束进行监听处理，同时在绘制onDraw中对文字进行绘制：

// init the translation animation

private void initOffsetAnimation() {

…

// 初始化移动动画

…

mOffsetAnimator.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

if (mGradientAnimator != null && isShowGradient) {

isOffsetAnimEnd = true;

mPaint.setShader(mLinearGradient);

mGradientAnimator.start();

}

}

});

}

@Override

protected void onDraw(Canvas canvas) {

if (!isOffsetAnimEnd) {// offset animation

…

// 文字移动动画

…

} else {// gradient animation

for (int i = 0; i < mQuietPoints.size(); i++) {

PointF quietP = mQuietPoints.get(i);

canvas.drawText(mLogoTexts.get(i), quietP.x, quietP.y, mPaint);

}

mGradientMatrix.setTranslate(mMatrixTranslate, 0);

mLinearGradient.setLocalMatrix(mGradientMatrix);

}

}

6. 到此，文字动画已经实现了。剩下来就是一些自定义属性的定义，对外提供一些属性的setter和getter方法了，同时需要考虑在页面生命周期过程中动画的资源释放。

总结：

各行各样都会淘汰一些能力差的，不仅仅是IT这个行业，所以，不要被程序猿是吃青春饭等等这类话题所吓倒，也不要觉得，找到一份工作，就享受安逸的生活，你在安逸的同时，别人正在奋力的向前跑，这样与别人的差距也就会越来越遥远，加油，希望，我们每一个人，成为更好的自己。

• BAT大厂面试题、独家面试工具包,

• 资料包括 数据结构、Kotlin、计算机网络、Framework源码、数据结构与算法、小程序、NDK、Flutter，

  
  
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
  找到一份工作，就享受安逸的生活，你在安逸的同时，别人正在奋力的向前跑，这样与别人的差距也就会越来越遥远，加油，希望，我们每一个人，成为更好的自己。

• BAT大厂面试题、独家面试工具包,

• 资料包括 数据结构、Kotlin、计算机网络、Framework源码、数据结构与算法、小程序、NDK、Flutter，

  [外链图片转存中…(img-IK1fh4jb-1714737781950)]
  [外链图片转存中…(img-BrT9kSoO-1714737781953)]
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！