博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
像音乐播放App一样移动背景
阅读量:6480 次
发布时间:2019-06-23

本文共 4137 字,大约阅读时间需要 13 分钟。

假设你常常听歌。你会发现歌曲app的背景会随着音乐移动的,从左到右或者从上到下。这样的动画尽管简单,可是这里有一个技巧。

假设你还不明确这样的动效看看以下的demo

演示动画
(很多其它具体请參考:)
一,使用setImageMatrix播放图片动画
以下是官方文档给出的解释
这里写图片描写叙述
你能够看到这里的解释非常easy。就是取代ImageView的图像矩阵。然后configureBounds和invalidate被调用。
在java代码中我们能够设置Matrix的scaleType

mImageView.setScaleType(ScaleType.MATRIX)

或者在xml文件里设置

android:scaleType="matrix"

以下是ImageView的初始矩阵(matrix)

这里写图片描写叙述
在x和y方向上放大2倍

final Matrix matrix = new Matrix();matrix.postScale(2, 2);imageView.setImageMatrix(matrix);

这里写图片描写叙述

final Matrix matrix = new Matrix();matrix.postScale(2, 2);matrix.postRotate(15);imageView.setImageMatrix(matrix);

这里写图片描写叙述

二,使你的图片移动
首先我们须要计算ImageView当前方向(水平。纵向)和图片当前方向的比例,就比方水平方向吧,我们就要让图片和view的高度同样,横向放大或者缩小。

float scaleFactor = (float)imageView.getHeight() / (float) drawable.getIntrinsicHeight();mMatrix.postScale(scaleFactor, scaleFactor);

这样我们就能保证图片的高和ImageView同样,而且填充满ImageView.

接下来我们就让ImageView的图片移动,我们要用到一个强大的Android动画框架:ValueAnimator,其原理就是利用ImageView的图像矩阵在x轴方向变换移动。

mAnimator = ValueAnimator.ofFloat(0, 100);mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  @Override  public void onAnimationUpdate(ValueAnimator animation) {      float value = (Float) animation.getAnimatedValue();      matrix.reset();      matrix.postScale(scaleFactor, scaleFactor);      matrix.postTranslate(-value, 0);      imageView.setImageMatrix(matrix);  }});mAnimator.setDuration(5000);mAnimator.start();

整个代码例如以下:

package com.testimageview;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ValueAnimator;import android.app.Activity;import android.graphics.Matrix;import android.graphics.RectF;import android.os.Bundle;import android.widget.ImageView;public class MainActivity extends Activity{
private static final int RightToLeft = 1; private static final int LeftToRight = 2; private static final int DURATION = 5000; private ValueAnimator mCurrentAnimator; private final Matrix mMatrix = new Matrix(); private ImageView mImageView; private float mScaleFactor; private int mDirection = RightToLeft; private RectF mDisplayRect = new RectF(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mImageView = (ImageView) findViewById(R.id.imageView); mImageView.post(new Runnable() { @Override public void run() { mScaleFactor = (float) mImageView.getHeight() / (float) mImageView.getDrawable().getIntrinsicHeight(); mMatrix.postScale(mScaleFactor, mScaleFactor); mImageView.setImageMatrix(mMatrix); animate(); } }); } private void animate() { updateDisplayRect(); if(mDirection == RightToLeft) { animate(mDisplayRect.left, mDisplayRect.left - (mDisplayRect.right - mImageView.getWidth())); } else { animate(mDisplayRect.left, 0.0f); } } private void animate(float from, float to) { mCurrentAnimator = ValueAnimator.ofFloat(from, to); mCurrentAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float value = (Float) animation.getAnimatedValue(); mMatrix.reset(); mMatrix.postScale(mScaleFactor, mScaleFactor); mMatrix.postTranslate(value, 0); mImageView.setImageMatrix(mMatrix); } }); mCurrentAnimator.setDuration(DURATION); mCurrentAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { if(mDirection == RightToLeft) mDirection = LeftToRight; else mDirection = RightToLeft; animate(); } }); mCurrentAnimator.start(); } private void updateDisplayRect() { mDisplayRect.set(0, 0, mImageView.getDrawable().getIntrinsicWidth(), mImageView.getDrawable().getIntrinsicHeight()); mMatrix.mapRect(mDisplayRect); }}
你可能感兴趣的文章
046 SparlSQL中的函数
查看>>
-27979 LoadRunner 错误27979 找不到请求表单 Action.c(73): Error -27979: Requested form not found...
查看>>
[LeetCode] Minimum Depth of Binary Tree
查看>>
,net运行框架
查看>>
Java 中 Emoji 的正则表达式
查看>>
Mixin Network第一届开发者大赛作品介绍- dodice, diceos和Fox.one luckycoin
查看>>
安卓Glide(4.7.1)使用笔记 01 - 引入项目
查看>>
中金易云:为出版社找到下一本《解忧杂货店》
查看>>
Flex布局
查看>>
Material Design之 AppbarLayout 开发实践总结
查看>>
Flutter之MaterialApp使用详解
查看>>
DataBinding最全使用说明
查看>>
原生Js交互之DSBridge
查看>>
Matlab编程之——卷积神经网络CNN代码解析
查看>>
三篇文章了解 TiDB 技术内幕 —— 说计算
查看>>
copy strong weak assign的区别
查看>>
OpenCV 入门
查看>>
css 3D transform变换
查看>>
ele表格合并行之后的selection选中
查看>>
正则表达式分解剖析(一文悟透正则表达式)
查看>>