Android小心心动画

我们这个动画其实是由一系列的基本动画组成的。所以我们只要找出这些动画并将它们一个接一个执行起来，那么这些基本动画的的共同作用下就有了我们想要的效果。就像高中我们学的合力，合力就是我们最终的动画效果，分力就是我们的基本动画。

现在我们来分析一下这个每个心图片的动画效果有哪些基本动画，因为上面只是产生了多个心图片的动画，我们只需要分析一个就够：

1. translationX,translationY:理由是动画在水平方向和垂直方向都有移动
2. scale：理由是动画有一个小变大的过程
3. alpha：理由是动画的图片
4. rotation:理由是图片有角度的变化

各个动画的实现

translationX

private fun createTranslationX(imageView: ImageView,x:Float): Animator { val animator = ObjectAnimator.ofFloat(imageView, "translationX", x,(x+Math.random()*60).toFloat(),(x-Math.random()*60).toFloat()) animator.duration = mDuration animator.interpolator = CycleInterpolator((1 * Math.random()).toFloat()) return animator }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

translationY

private fun createTranslationY(imageView: ImageView,y:Float): Animator { val animator = ObjectAnimator.ofFloat(imageView, "translationY", y, 0f) animator.duration = mDuration animator.interpolator = AccelerateInterpolator() return animator }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

scale

private fun createScale(imageView: ImageView): Animator { val animatorX = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 1.5f) val animatorY = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 1.5f) val animatorSet = AnimatorSet() animatorSet.duration = mDuration animatorSet.interpolator = AccelerateInterpolator() animatorSet.play(animatorX).with(animatorY) return animatorSet }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

注意：scale要在两个方向上做，否则会变形

alpha

 private fun createAlpha(imageView: ImageView): Animator { val animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0.1f) animator.duration = mDuration animator.interpolator = AccelerateInterpolator() return animator }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

最后执行这一系列的动画

fun start(x:Float=(width/2).toFloat(),y:Float = (height/2).toFloat()) { val imageView = createHeartView() addView(imageView) val animatorSet = AnimatorSet() animatorSet.play(createTranslationX(imageView,x)) .with(createTranslationY(imageView,y)) .with(createScale(imageView)) .with(createRotation(imageView)) .with(createAlpha(imageView)) animatorSet.addListener(onEnd = { removeView(imageView) }) animatorSet.start() }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

使用这个自定义的动画

Activity：

val layout = findViewById<RedHeartEffectRelativeLayout>(R.id.relativeLayout); val tv = findViewById<TextView>(R.id.tv) layout.setOnTouchListener { _, event -> if (event?.action == MotionEvent.ACTION_DOWN) { layout.start(event.x, event.y) } true }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<com.hoppy.flutterredhearteffect.RedHeartEffectRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:id="@+id/relativeLayout"> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_centerInParent="true"/>

</com.hoppy.flutterredhearteffect.RedHeartEffectRelativeLayout>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

Demo

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/118120138