Android开发教程案例源码分享-两个头像靠拢动画
两个头像靠拢动画，有些用在匹配成功。挺常见的
一、思路：
用MotionLayout
二、效果图：
三、关键代码：
xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cl_video_out_anim"
android:layout_width="@dimen/dp_140"
android:layout_height="@dimen/dp_44"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layoutDescription="@xml/activity_video_match_out_scene"
>
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/cl_bg_wave_anim"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_video_match_out_wave_scene">
<View
android:id="@+id/view_bg_wave"
android:layout_width="@dimen/dp_2"
android:layout_height="@dimen/dp_2"
android:background="@drawable/bg_video_match_out_wave"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
<TextView
android:id="@+id/tv_video_match_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_match"
android:textSize="@dimen/sp_12"
android:textColor="@color/white_60"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="@dimen/dp_14"
android:layout_marginTop="@dimen/dp_9"
/>
<com.cong.mytwoheadanimdemo.RoundConstraintLayout
android:id="@+id/fl_left_video_match_out"
android:layout_width="@dimen/dp_29"
android:layout_height="@dimen/dp_29"
app:bgColor="@color/white"
app:radiusRound="@dimen/dp_15"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="@+id/iv_left"
android:layout_width="@dimen/dp_28"
android:layout_height="@dimen/dp_28"
android:src="@mipmap/head2"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</com.cong.mytwoheadanimdemo.RoundConstraintLayout>
<com.cong.mytwoheadanimdemo.RoundConstraintLayout
android:id="@+id/fl_right_video_match_out"
android:layout_width="@dimen/dp_29"
android:layout_height="@dimen/dp_29"
app:bgColor="@color/white"
app:radiusRound="@dimen/dp_15"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/iv_right"
android:layout_width="@dimen/dp_28"
android:layout_height="@dimen/dp_28"
android:src="@mipmap/head3"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</com.cong.mytwoheadanimdemo.RoundConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
kotlin代码：
package com.cong.mytwoheadanimdemo
import android.content.Context
import android.graphics.drawable.GradientDrawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import androidx.constraintlayout.motion.widget.MotionLayout
import androidx.core.content.ContextCompat
import com.cong.mytwoheadanimdemo.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
lateinit var mBinding:ActivityMainBinding
lateinit var mContext:Context
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
mBinding = ActivityMainBinding.inflate(layoutInflater)
setContentView(mBinding.root)
mContext = this
}
override fun onResume() {
super.onResume()
Handler().postDelayed({
videoMatchAnim()
},800)
}
private fun videoMatchAnim(){
ShapeUtils.setShapeGradientAndRound(
mBinding.layoutVideoMatch.clVideoOutAnim,
intArrayOf(
ContextCompat.getColor(mContext, R.color.color_4776E6),
ContextCompat.getColor(mContext, R.color.color_8E54E9)
),
GradientDrawable.Orientation.LEFT_RIGHT,
dp2px(mContext, 22).toFloat()
)
mBinding.layoutVideoMatch.ivLeft.clipViewCornerByDp(15f)
mBinding.layoutVideoMatch.ivRight.clipViewCornerByDp(15f)
mBinding.layoutVideoMatch.clVideoOutAnim.transitionToStart()
mBinding.layoutVideoMatch.clVideoOutAnim.setTransition(R.id.video_match_out)
mBinding.layoutVideoMatch.clVideoOutAnim.transitionToEnd()
mBinding.layoutVideoMatch.clBgWaveAnim.transitionToStart()
mBinding.layoutVideoMatch.clBgWaveAnim.setTransition(R.id.video_match_out_wave)
mBinding.layoutVideoMatch.clBgWaveAnim.transitionToEnd()
mBinding.layoutVideoMatch.clVideoOutAnim.addTransitionListener(object : MotionLayout.TransitionListener{
override fun onTransitionStarted(
motionLayout: MotionLayout?,
startId: Int,
endId: Int
) {
}
override fun onTransitionChange(
motionLayout: MotionLayout?,
startId: Int,
endId: Int,
progress: Float
) {
}
override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
Handler().postDelayed({
mBinding.layoutVideoMatch.clVideoOutAnim.transitionToStart()
mBinding.layoutVideoMatch.clVideoOutAnim.setTransition(R.id.video_match_out)
mBinding.layoutVideoMatch.clVideoOutAnim.transitionToEnd()
},800)
}
override fun onTransitionTrigger(
motionLayout: MotionLayout?,
triggerId: Int,
positive: Boolean,
progress: Float
) {
}
})
mBinding.layoutVideoMatch.clBgWaveAnim.addTransitionListener(object : MotionLayout.TransitionListener{
override fun onTransitionStarted(
motionLayout: MotionLayout?,
startId: Int,
endId: Int
) {
}
override fun onTransitionChange(
motionLayout: MotionLayout?,
startId: Int,
endId: Int,
progress: Float
) {
}
override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
Handler().postDelayed({
mBinding.layoutVideoMatch.clBgWaveAnim.transitionToStart()
mBinding.layoutVideoMatch.clBgWaveAnim.setTransition(R.id.video_match_out_wave)
mBinding.layoutVideoMatch.clBgWaveAnim.transitionToEnd()
},800)
}
override fun onTransitionTrigger(
motionLayout: MotionLayout?,
triggerId: Int,
positive: Boolean,
progress: Float
) {
}
})
}
}
项目demo源码结构图：
有问题或者需要完整源码demo的可以看简介联系我，也可以私信我，我每天都看私信的
