save

罗明文

2024-06-18 c9f6a2283ee7e5595c91c6d721726a89a3ab9ecd

save

 app/src/main/java/com/dollearn/student/ui/home/DailyFragment.kt

@@ -59,7 +59,7 @@
        cl_5.clickDelay {
            showDialog("加载题目...")
            HttpManager.pictureMateVoice(season, week, day).requestByF(this){_,data->
//                startActivityForResult<IncludeActivity>(1,"data" to data,"day" to day,"week" to week,"season" to season)
                startActivityForResult<MatchActivity>(1,"data" to data,"day" to day,"week" to week,"season" to season)
            }
        }
    }

 app/src/main/java/com/dollearn/student/ui/home/ListenFragment.kt

@@ -160,7 +160,6 @@
            }
        }


    }

    override fun onStartPlay() {

 app/src/main/java/com/dollearn/student/ui/home/MatchActivity.kt

@@ -41,7 +41,7 @@

    override fun initClick() {
        tv_last.setOnClickListener {
            (fragments[view_pager.currentItem-1] as IncludeFragment).recover()
            (fragments[view_pager.currentItem-1] as MatchFragment).recover()
            view_pager.setCurrentItem(view_pager.currentItem-1,true)
            if (view_pager.currentItem == 0)
                tv_last.gone()
@@ -58,7 +58,7 @@
            ResultActivity.startResult(this,day,week,season,3,totalCount,rightCount,data!!.data.integral,time,data!!.data.id)
            finish()
        }else{
            (fragments[view_pager.currentItem+1] as IncludeFragment).recover()
            (fragments[view_pager.currentItem+1] as MatchFragment).recover()
            view_pager.setCurrentItem(view_pager.currentItem+1,true)
            tv_last.visible()
        }
@@ -68,7 +68,7 @@
        data?.apply {
            tv_progress.text = "已完成：1/${subjectList.size}"
            subjectList.forEachIndexed { index, subject ->
                fragments.add(IncludeFragment.getInstance(index))
                fragments.add(MatchFragment.getInstance(index))
            }
            view_pager.adapter = @SuppressLint("WrongConstant")
            object : FragmentPagerAdapter(supportFragmentManager,0) {

 app/src/main/java/com/dollearn/student/ui/home/MatchFragment.kt

@@ -8,15 +8,17 @@
import androidx.core.os.bundleOf
import cn.sinata.xldutils.fragment.BaseFragment
import cn.sinata.xldutils.gone
import cn.sinata.xldutils.utils.myToast
import cn.sinata.xldutils.visible
import com.dollearn.student.R
import com.dollearn.student.utils.AudioUtils
import com.dollearn.student.utils.extention.clickDelay
import kotlinx.android.synthetic.main.fragment_include.*
import kotlinx.android.synthetic.main.fragment_match.*
import org.jetbrains.anko.imageResource


//todo 1.首次播放播放中图标不显示 2.选择正确后不能再选择 3.选择正确后处理语音条位置
class MatchFragment : BaseFragment(), AudioUtils.OnAudioStatusUpdateListener {
    override fun contentViewId() = R.layout.fragment_include
    override fun contentViewId() = R.layout.fragment_match

    private val TAG = "Match=======》"

@@ -27,17 +29,15 @@
    private val player by lazy { AudioUtils() }
    private val group by lazy { arguments?.getInt("group")?:0 }
    private val data by lazy {
        (requireActivity() as IncludeActivity).data
        (requireActivity() as MatchActivity).data
    }

    private val act by lazy { requireActivity() as IncludeActivity }
    private val act by lazy { requireActivity() as MatchActivity }

    private var voiceIndex = -1 //点击播放的声音序号 0-5取值
    private val voiceViews by lazy { arrayListOf(cl_voice1,cl_voice2,cl_voice3,cl_voice4,cl_voice5,cl_voice6) }
    private val voiceViews by lazy { arrayListOf(cl_voice_1,cl_voice_2,cl_voice_3,cl_voice_4) }
    private var playing = false

    private val answerImg = arrayListOf<String>() //随机答案图片
    private var currentImage = 0 //当前作答的题号：2,4,5
    private val voiceList = arrayListOf<String>() //语音列表，随机排序
    private var voiceIndex = -1 //点击播放的声音序号 0-3取值

    override fun onFirstVisibleToUser() {
        player.setOnAudioStatusUpdateListener(this)
@@ -47,7 +47,7 @@
                super.handleMessage(msg)
                when(msg.what){
                    PLAY_VOICE->{
                        player.startPlayMusic(requireContext(),data!!.subjectList[group][voiceIndex].correct)
                        player.startPlayMusic(requireContext(),voiceList[voiceIndex])
                    }
                    TO_NEXT->{
                        if (isAdded&&!playing){
@@ -58,26 +58,14 @@
            }
        }
        data?.apply {
            val originList = subjectList[group]
            iv_1.setImageURI(originList[0].img)
            iv_2.setImageURI(originList[1].img)
            iv_4.setImageURI(originList[3].img)
            answerImg.clear()
            answerImg.add(originList[2].img)
            answerImg.add(originList[4].img)
            answerImg.add(originList[5].img)
            val imgs = subjectList[group]
            iv_1.setImageURI(imgs[0].img)
            iv_2.setImageURI(imgs[1].img)
            iv_3.setImageURI(imgs[2].img)
            iv_4.setImageURI(imgs[3].img)
            voiceList.addAll(imgs.map { it.correct })
            voiceList.shuffle()
        }
        voiceViews.forEachIndexed { index, constraintLayout ->
            if (index == 0)
                constraintLayout.isEnabled = true
            else{
                if (index == 3||index == 5)
                    constraintLayout.isEnabled = data!!.subjectList[group][index-1].completed
                else
                    constraintLayout.isEnabled = data!!.subjectList[group][index].listend
            }
        }
        showVoiceEnable()
        initClick()
    }

@@ -85,178 +73,181 @@
        voiceViews.forEachIndexed { index, constraintLayout ->
            constraintLayout.clickDelay {
                if (!playing){
                    if (index!=0&&!data!!.subjectList[group][index-1].listend){
                        myToast("请按顺序听语音")
                        return@clickDelay
                    }
                    voiceIndex = index
                    handler?.sendEmptyMessage(PLAY_VOICE)
                    motion.transitionToEnd()
                }
            }
        }

        cl_answer_1.clickDelay {
            if (currentImage == 0)
        cl_1.clickDelay {
            if (playing||voiceIndex == -1) //未播放或者正在播放，不可点击
                return@clickDelay
            val subject = data!!.subjectList[group][currentImage]
            if (!subject.listend||subject.completed){
            if (data!!.subjectList[group][0].completed) //已作答不可点击
                return@clickDelay
            }
            act.totalCount++
            if (answerImg[0] == subject.img){
            if (data!!.subjectList[group][0].correct == voiceList[voiceIndex]){
                result_1.imageResource = R.mipmap.successs
                data!!.subjectList[group][0].completed = true
                act.rightCount++
                data!!.subjectList[group][currentImage].completed = true
                voiceViews[currentImage].callOnClick()
                motion.transitionToEnd()
            }else{
                iv_error_1.visible()
                iv_error_1.postDelayed({
                    clearAnswerImg()
                },3000)
            }
        }

        cl_answer_2.clickDelay {
            if (currentImage == 0)
                return@clickDelay
            val subject = data!!.subjectList[group][currentImage]
            if (!subject.listend||subject.completed){
                return@clickDelay
            }
            if (answerImg[1] == subject.img){
                data!!.subjectList[group][currentImage].completed = true
                voiceViews[currentImage].callOnClick()
                motion.transitionToEnd()
            }else{
                iv_error_2.visible()
                iv_error_2.postDelayed({
                    clearAnswerImg()
                },3000)
            }
        }

        cl_answer_3.clickDelay {
            if (currentImage == 0)
                return@clickDelay
            val subject = data!!.subjectList[group][currentImage]
            if (!subject.listend||subject.completed){
                return@clickDelay
            }
            if (answerImg[2] == subject.img){
                data!!.subjectList[group][currentImage].completed = true
                voiceViews[currentImage].callOnClick()
                motion.transitionToEnd()
            }else{
                iv_error_3.visible()
                iv_error_3.postDelayed({
                    clearAnswerImg()
                },3000)
            }
        }
    }

    private fun showVoiceEnable(){
        voiceViews.forEachIndexed { index, constraintLayout ->
            if (index == 0)
                constraintLayout.isEnabled = true
            else{
                if (index == 3||index == 5)
                    constraintLayout.isEnabled = data!!.subjectList[group][index-1].completed
                else
                    constraintLayout.isEnabled = data!!.subjectList[group][index-1].listend
            }
        }
    }

    private fun clearAnswerImg(){
        iv_answer_1.setImageURI("")
        iv_answer_2.setImageURI("")
        iv_answer_3.setImageURI("")
        iv_3.setImageURI("")
        iv_5.setImageURI("")
        iv_6.setImageURI("")
        iv_full_1.gone()
        iv_full_2.gone()
        iv_full_3.gone()
        iv_error_1.gone()
        iv_error_2.gone()
        iv_error_3.gone()
        data!!.subjectList[group][currentImage].listend = false
    }

    private fun showAnswerImg(){
        answerImg.shuffle()
        iv_answer_1.setImageURI(answerImg[0])
        iv_answer_2.setImageURI(answerImg[1])
        iv_answer_3.setImageURI(answerImg[2])

        iv_full_1.visible()
        iv_full_2.visible()
        iv_full_3.visible()

        val voiceNow = data!!.subjectList[group][currentImage]
        //设置动画飞行路径 3对3
        val rightImageIndex = answerImg.indexOf(voiceNow.img)
                //执行飞行动画
        var start = 0
        var end = 0
        when(rightImageIndex){
                when(voiceIndex){
            0->{
                start = R.id.start_1
                when(currentImage){
                    2-> end = R.id.end_1_1
                    4-> end = R.id.end_1_2
                    5-> end = R.id.end_1_3
                }
                        end = R.id.end_1_1
            }
            1->{
                start = R.id.start_2
                when(currentImage){
                    2-> end = R.id.end_2_1
                    4-> end = R.id.end_2_2
                    5-> end = R.id.end_2_3
                }
                        end = R.id.end_2_1
            }
            2->{
                start = R.id.start_3
                when(currentImage){
                    2-> end = R.id.end_3_1
                    4-> end = R.id.end_3_2
                    5-> end = R.id.end_3_3
                        end = R.id.end_3_1
                    }
                    3->{
                        start = R.id.start_4
                        end = R.id.end_4_1
                }
            }
        }
        motion.progress = 0f
        motion.setTransition(start,end)
        motion.setTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                when(rightImageIndex){
                motion.transitionToEnd()
            }else{
                result_1.imageResource = R.mipmap.zhifushibai
            }
            showResultAnim(cl_1)
        }

        cl_2.clickDelay {
            if (playing||voiceIndex == -1) //未播放或者正在播放，不可点击
                return@clickDelay
            if (data!!.subjectList[group][1].completed) //已作答不可点击
                return@clickDelay
            act.totalCount ++
            if (data!!.subjectList[group][1].correct == voiceList[voiceIndex]){
                result_2.imageResource = R.mipmap.successs
                data!!.subjectList[group][1].completed = true
                act.rightCount ++
                //执行飞行动画
                var start = 0
                var end = 0
                when(voiceIndex){
                    0->{
                        iv_full_1.gone()
                        start = R.id.start_1
                        end = R.id.end_1_2
                    }
                    1->{
                        iv_full_2.gone()
                        start = R.id.start_2
                        end = R.id.end_2_2
                    }
                    2->{
                        iv_full_3.gone()
                        start = R.id.start_3
                        end = R.id.end_3_2
                    }
                    3->{
                        start = R.id.start_4
                        end = R.id.end_4_2
                    }
                }
                motion.setTransition(start,end)
                motion.transitionToEnd()
            }else{
                result_2.imageResource = R.mipmap.zhifushibai
            }
            showResultAnim(cl_2)
        }

        cl_3.clickDelay {
            if (playing||voiceIndex == -1) //未播放或者正在播放，不可点击
                return@clickDelay
            if (data!!.subjectList[group][2].completed) //已作答不可点击
                return@clickDelay
            act.totalCount ++
            if (data!!.subjectList[group][2].correct == voiceList[voiceIndex]){
                result_3.imageResource = R.mipmap.successs
                data!!.subjectList[group][2].completed = true
                act.rightCount ++
                //执行飞行动画
                var start = 0
                var end = 0
                when(voiceIndex){
                    0->{
                        start = R.id.start_1
                        end = R.id.end_1_3
                    }
                    1->{
                        start = R.id.start_2
                        end = R.id.end_2_3
                    }
                    2->{
                        start = R.id.start_3
                        end = R.id.end_3_3
                    }
                    3->{
                        start = R.id.start_4
                        end = R.id.end_4_3
                    }
                }
                motion.setTransition(start,end)
                motion.transitionToEnd()
            }else{
                result_3.imageResource = R.mipmap.zhifushibai
            }
            showResultAnim(cl_3)
        }

        cl_4.clickDelay {
            if (playing||voiceIndex == -1) //未播放或者正在播放，不可点击
                return@clickDelay
            if (data!!.subjectList[group][3].completed) //已作答不可点击
                return@clickDelay
            act.totalCount ++
            if (data!!.subjectList[group][3].correct == voiceList[voiceIndex]){
                result_4.imageResource = R.mipmap.successs
                data!!.subjectList[group][3].completed = true
                act.rightCount ++
                //执行飞行动画
                var start = 0
                var end = 0
                when(voiceIndex){
                    0->{
                        start = R.id.start_1
                        end = R.id.end_1_4
                    }
                    1->{
                        start = R.id.start_2
                        end = R.id.end_2_4
                    }
                    2->{
                        start = R.id.start_3
                        end = R.id.end_3_4
                    }
                    3->{
                        start = R.id.start_4
                        end = R.id.end_4_4
                    }
                }
                motion.setTransition(start,end)
                motion.transitionToEnd()
            }else{
                result_4.imageResource = R.mipmap.zhifushibai
            }
            showResultAnim(cl_4)
        }
    }

    private fun showResultAnim(m:MotionLayout){
        m.transitionToEnd()
        m.setTransitionListener(object :MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
            }

            override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {
                when(currentImage){
                    2->{
                        iv_3.setImageURI(data!!.subjectList[group][2].img)
                    }
                    4->{
                        iv_5.setImageURI(data!!.subjectList[group][4].img)
                    }
                    5->{
                        iv_6.setImageURI(data!!.subjectList[group][5].img)
                    }
                }
                m.progress = 0f
            }

            override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
@@ -270,13 +261,11 @@
    fun recover(){
        Log.e(TAG,"回到上一题，恢复答题前的状态")
        motion.progress = 0f
        clearAnswerImg()
        currentImage = 0
        data!!.subjectList[group].forEach {
            it.completed = false
            it.listend = false
        }
        showVoiceEnable()

    }

    companion object{
@@ -299,6 +288,8 @@

    override fun onStartPlay() {
        playing = true
        val list = data!!.subjectList[group]
        tv_name.text = list[list.map { it.correct }.indexOf(voiceList[voiceIndex])].name
        when(voiceIndex){
            0->{
                iv1_1.gone()
@@ -320,16 +311,6 @@
                iv1_4.gone()
                iv2_4.gone()
                iv_playing_4.visible()
            }
            4->{
                iv1_5.gone()
                iv2_5.gone()
                iv_playing_5.visible()
            }
            5->{
                iv1_6.gone()
                iv2_6.gone()
                iv_playing_6.visible()
            }

        }
@@ -354,38 +335,13 @@
                iv1_3.visible()
                iv2_3.visible()
                iv_playing_3.gone()
                if (!subject.completed){
                    currentImage = 2
                    showAnswerImg()
                }
            }
            3->{
                iv1_4.visible()
                iv2_4.visible()
                iv_playing_4.gone()
            }
            4->{
                iv1_5.visible()
                iv2_5.visible()
                iv_playing_5.gone()
                if (!subject.completed){
                    currentImage = 4
                    showAnswerImg()

                }
            }
            5->{
                iv1_6.visible()
                iv2_6.visible()
                iv_playing_6.gone()
                if (!subject.completed){
                    currentImage = 5
                    showAnswerImg()
                }else{
                    Log.e(TAG,"本题全部答对，3秒后进入下一图")
                    handler?.sendEmptyMessageDelayed(TO_NEXT,3000)
                }
            }
        }
        showVoiceEnable()
    }
}

 app/src/main/res/layout/fragment_match.xml

@@ -4,7 +4,7 @@
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/motion"
    app:layoutDescription="@xml/scene_fragment_listen_voice">
    app:layoutDescription="@xml/scene_fragment_match">

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
@@ -36,6 +36,16 @@
        android:id="@+id/line4"
        app:layout_constraintGuide_percent="0.8"
        android:orientation="vertical"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/tv_name"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="70dp"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:textStyle="bold"/>
    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/cl_1"
        android:layout_width="0dp"
@@ -43,8 +53,9 @@
        android:padding="4dp"
        android:elevation="2dp"
        app:layout_constraintDimensionRatio="333:259"
        android:layout_marginTop="96dp"
        android:layout_marginTop="104dp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintVertical_chainStyle="packed"
        android:background="@drawable/bg_white_8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/center"
@@ -108,8 +119,9 @@
        app:layoutDescription="@xml/fragment_listen_scene_result_3"
        app:layout_constraintStart_toStartOf="@id/cl_1"
        app:layout_constraintEnd_toEndOf="@id/cl_1"
        android:background="@drawable/bg_white_8dp"
        app:layout_constraintTop_toBottomOf="@id/cl_1"
        android:background="@drawable/bg_white_8dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="parent">
        <View
            android:layout_width="match_parent"
@@ -168,10 +180,13 @@
        android:layout_height="52dp"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="2dp"
        android:id="@+id/cl_voice"
        android:id="@+id/cl_voice_1"
        app:layout_constraintStart_toStartOf="@id/line1"
        app:layout_constraintEnd_toEndOf="@id/line1"
        android:layout_marginTop="15dp"
        android:background="@drawable/bg_blue_8dp">
        <ImageView
            android:id="@+id/iv1"
            android:id="@+id/iv1_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/yuyin"
@@ -180,7 +195,7 @@
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="25dp"/>
        <ImageView
            android:id="@+id/iv2"
            android:id="@+id/iv2_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/play"
@@ -189,7 +204,124 @@
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="23dp"/>
        <ImageView
            android:id="@+id/iv_playing"
            android:id="@+id/iv_playing_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:src="@mipmap/bofangzhong"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="159dp"
        android:layout_height="52dp"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="2dp"
        android:id="@+id/cl_voice_2"
        app:layout_constraintStart_toStartOf="@id/line2"
        app:layout_constraintEnd_toEndOf="@id/line2"
        android:layout_marginTop="15dp"
        android:background="@drawable/bg_blue_8dp">
        <ImageView
            android:id="@+id/iv1_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/yuyin"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="25dp"/>
        <ImageView
            android:id="@+id/iv2_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/play"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="23dp"/>
        <ImageView
            android:id="@+id/iv_playing_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:src="@mipmap/bofangzhong"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="159dp"
        android:layout_height="52dp"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="2dp"
        android:id="@+id/cl_voice_3"
        app:layout_constraintStart_toStartOf="@id/line3"
        app:layout_constraintEnd_toEndOf="@id/line3"
        android:layout_marginTop="15dp"
        android:background="@drawable/bg_blue_8dp">
        <ImageView
            android:id="@+id/iv1_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/yuyin"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="25dp"/>
        <ImageView
            android:id="@+id/iv2_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/play"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="23dp"/>
        <ImageView
            android:id="@+id/iv_playing_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:src="@mipmap/bofangzhong"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="159dp"
        android:layout_height="52dp"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="2dp"
        android:id="@+id/cl_voice_4"
        app:layout_constraintStart_toStartOf="@id/line4"
        app:layout_constraintEnd_toEndOf="@id/line4"
        android:layout_marginTop="15dp"
        android:background="@drawable/bg_blue_8dp">
        <ImageView
            android:id="@+id/iv1_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/yuyin"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="25dp"/>
        <ImageView
            android:id="@+id/iv2_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/play"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="23dp"/>
        <ImageView
            android:id="@+id/iv_playing_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"

 app/src/main/res/xml/scene_fragment_match.xml

New file
@@ -0,0 +1,283 @@
<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="2000">
       <KeyFrameSet>

       </KeyFrameSet>

    </Transition>

    <ConstraintSet android:id="@+id/start">
<!--        <Constraint android:id="@+id/cl_1"-->
<!--            android:layout_marginTop="90dp"-->
<!--            android:layout_width="0dp"-->
<!--            android:layout_height="0dp"-->
<!--            motion:layout_constraintEnd_toStartOf="@+id/center"-->
<!--            android:layout_marginEnd="11dp"-->
<!--            motion:layout_constraintDimensionRatio="333:259"-->
<!--            android:layout_marginBottom="8dp"-->
<!--            motion:layout_constraintBottom_toTopOf="@id/cl_3"-->
<!--            motion:layout_constraintTop_toTopOf="parent"/>-->
<!--        <Constraint android:id="@+id/cl_3"-->
<!--            android:layout_marginTop="90dp"-->
<!--            android:layout_width="0dp"-->
<!--            motion:layout_constraintStart_toStartOf="@id/cl_1"-->
<!--            motion:layout_constraintEnd_toEndOf="@id/cl_1"-->
<!--            motion:layout_constraintTop_toBottomOf="@id/cl_1"-->
<!--            android:layout_height="0dp"-->
<!--            motion:layout_constraintBottom_toBottomOf="parent"-->
<!--            android:layout_marginBottom="15dp"/>-->
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
<!--        <Constraint android:id="@+id/cl_1"-->
<!--            android:layout_marginTop="103dp"-->
<!--            android:layout_width="0dp"-->
<!--            android:layout_height="0dp"-->
<!--            motion:layout_constraintTop_toTopOf="parent"/>-->
<!--        <Constraint android:id="@+id/cl_3"-->
<!--            android:layout_marginTop="108dp"-->
<!--            android:layout_width="0dp"-->
<!--            android:layout_height="0dp"-->
<!--            motion:layout_constraintBottom_toBottomOf="parent"-->
<!--            android:layout_marginBottom="3dp"/>-->
    </ConstraintSet>

    <ConstraintSet android:id="@+id/start_1">
        <Constraint android:id="@+id/cl_voice_1"
            motion:layout_constraintStart_toStartOf="@+id/line1"
            motion:layout_constraintEnd_toEndOf="@+id/line1"
            motion:layout_constraintTop_toTopOf="parent"
            android:layout_width="159dp"
            android:layout_marginTop="15dp"
            android:layout_height="52dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/start_2">
        <Constraint android:id="@+id/cl_voice_2"
            motion:layout_constraintStart_toStartOf="@+id/line2"
            motion:layout_constraintEnd_toEndOf="@+id/line2"
            motion:layout_constraintTop_toTopOf="parent"
            android:layout_width="159dp"
            android:layout_marginTop="15dp"
            android:layout_height="52dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/start_3">
        <Constraint android:id="@+id/cl_voice_3"
            motion:layout_constraintStart_toStartOf="@+id/line3"
            motion:layout_constraintEnd_toEndOf="@+id/line3"
            motion:layout_constraintTop_toTopOf="parent"
            android:layout_width="159dp"
            android:layout_marginTop="15dp"
            android:layout_height="52dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/start_4">
        <Constraint android:id="@+id/cl_voice_4"
            motion:layout_constraintStart_toStartOf="@+id/line4"
            motion:layout_constraintEnd_toEndOf="@+id/line4"
            motion:layout_constraintTop_toTopOf="parent"
            android:layout_width="159dp"
            android:layout_marginTop="15dp"
            android:layout_height="52dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_1_1">
        <Constraint android:id="@+id/cl_voice_1"
            motion:layout_constraintStart_toStartOf="@+id/cl_1"
            motion:layout_constraintEnd_toEndOf="@+id/cl_1"
            motion:layout_constraintTop_toTopOf="@+id/cl_1"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_1_2">
        <Constraint android:id="@+id/cl_voice_1"
            motion:layout_constraintStart_toStartOf="@+id/cl_2"
            motion:layout_constraintEnd_toEndOf="@+id/cl_2"
            motion:layout_constraintTop_toTopOf="@+id/cl_2"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_1_3">
        <Constraint android:id="@+id/cl_voice_1"
            motion:layout_constraintStart_toStartOf="@+id/cl_3"
            motion:layout_constraintEnd_toEndOf="@+id/cl_3"
            motion:layout_constraintTop_toTopOf="@+id/cl_3"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_1_4">
        <Constraint android:id="@+id/cl_voice_1"
            motion:layout_constraintStart_toStartOf="@+id/cl_4"
            motion:layout_constraintEnd_toEndOf="@+id/cl_4"
            motion:layout_constraintTop_toTopOf="@+id/cl_4"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_2_1">
        <Constraint android:id="@+id/cl_voice_2"
            motion:layout_constraintStart_toStartOf="@+id/cl_1"
            motion:layout_constraintEnd_toEndOf="@+id/cl_1"
            motion:layout_constraintTop_toTopOf="@+id/cl_1"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_2_2">
        <Constraint android:id="@+id/cl_voice_2"
            motion:layout_constraintStart_toStartOf="@+id/cl_2"
            motion:layout_constraintEnd_toEndOf="@+id/cl_2"
            motion:layout_constraintTop_toTopOf="@+id/cl_2"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_2_3">
        <Constraint android:id="@+id/cl_voice_2"
            motion:layout_constraintStart_toStartOf="@+id/cl_3"
            motion:layout_constraintEnd_toEndOf="@+id/cl_3"
            motion:layout_constraintTop_toTopOf="@+id/cl_3"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_2_4">
        <Constraint android:id="@+id/cl_voice_2"
            motion:layout_constraintStart_toStartOf="@+id/cl_4"
            motion:layout_constraintEnd_toEndOf="@+id/cl_4"
            motion:layout_constraintTop_toTopOf="@+id/cl_4"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_3_1">
        <Constraint android:id="@+id/cl_voice_3"
            motion:layout_constraintStart_toStartOf="@+id/cl_1"
            motion:layout_constraintEnd_toEndOf="@+id/cl_1"
            motion:layout_constraintTop_toTopOf="@+id/cl_1"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_3_2">
        <Constraint android:id="@+id/cl_voice_3"
            motion:layout_constraintStart_toStartOf="@+id/cl_2"
            motion:layout_constraintEnd_toEndOf="@+id/cl_2"
            motion:layout_constraintTop_toTopOf="@+id/cl_2"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_3_3">
        <Constraint android:id="@+id/cl_voice_3"
            motion:layout_constraintStart_toStartOf="@+id/cl_3"
            motion:layout_constraintEnd_toEndOf="@+id/cl_3"
            motion:layout_constraintTop_toTopOf="@+id/cl_3"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_3_4">
        <Constraint android:id="@+id/cl_voice_3"
            motion:layout_constraintStart_toStartOf="@+id/cl_4"
            motion:layout_constraintEnd_toEndOf="@+id/cl_4"
            motion:layout_constraintTop_toTopOf="@+id/cl_4"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_4_1">
        <Constraint android:id="@+id/cl_voice_4"
            motion:layout_constraintStart_toStartOf="@+id/cl_1"
            motion:layout_constraintEnd_toEndOf="@+id/cl_1"
            motion:layout_constraintTop_toTopOf="@+id/cl_1"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_4_2">
        <Constraint android:id="@+id/cl_voice_4"
            motion:layout_constraintStart_toStartOf="@+id/cl_2"
            motion:layout_constraintEnd_toEndOf="@+id/cl_2"
            motion:layout_constraintTop_toTopOf="@+id/cl_2"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_4_3">
        <Constraint android:id="@+id/cl_voice_4"
            motion:layout_constraintStart_toStartOf="@+id/cl_3"
            motion:layout_constraintEnd_toEndOf="@+id/cl_3"
            motion:layout_constraintTop_toTopOf="@+id/cl_3"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end_4_4">
        <Constraint android:id="@+id/cl_voice_4"
            motion:layout_constraintStart_toStartOf="@+id/cl_4"
            motion:layout_constraintEnd_toEndOf="@+id/cl_4"
            motion:layout_constraintTop_toTopOf="@+id/cl_4"
            android:layout_marginTop="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            android:layout_width="0dp"
            android:layout_height="40dp"/>
    </ConstraintSet>
</MotionScene>