将布局动画与视图寻呼机滑动进度同步答案

【问题标题】：Sync layout animation with view pager swipe progress将布局动画与视图寻呼机滑动进度同步
【发布时间】：2021-05-12 10:21:23
【问题描述】：

我在视图寻呼机中有一个片段，该片段是部分动画的。片段内的表格布局有如下动画幻灯片：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0" android:toAlpha="1.0"
        android:fillEnabled="true"
        android:fillBefore="true" android:fillAfter="true"
        android:duration="500"/>
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="10%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

我想在每次进入这个页面时播放这个动画，离开时反向播放。但是动画应该与滑动进度同步。因此，当我刷入或刷出 50% 时，表格布局应位于 deltaY = 5% 和 alpha = 0.5。这可能吗？

【问题讨论】：

标签： android kotlin

【解决方案1】：

好的，我无法控制播放动画的持续时间，所以我还必须以编程方式定义动画。

基类：

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.viewpager.widget.ViewPager
import org.dermagerestudent.ehrenlos.R

abstract class ViewPagerAnimatedFragment(private val layoutID: Int, private val position: Int): Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(this.layoutID, container, false)
        this.onCreate(view)

        val viewPager = this@ViewPagerAnimatedFragment.activity?.findViewById<ViewPager>(R.id.main_view_pager)!!
        viewPager.addOnPageChangeListener(object: ViewPager.OnPageChangeListener {
            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                if (!(this@ViewPagerAnimatedFragment.position - 1..this@ViewPagerAnimatedFragment.position).contains(position))
                    return

                this@ViewPagerAnimatedFragment.onScroll(
                    if (position < this@ViewPagerAnimatedFragment.position) positionOffset else 1 - positionOffset
                )
            }

            override fun onPageSelected(position: Int) { }
            override fun onPageScrollStateChanged(state: Int) { }
        })

        return view
    }

    open fun onCreate(view: View) { }
    open fun onScroll(pageVisibility: Float) { }
}

派生类示例：

import android.view.View
import android.view.animation.AnimationUtils
import android.widget.LinearLayout

import org.dermagerestudent.ehrenlos.R

class HomeFragment(layoutID: Int, position: Int) : ViewPagerAnimatedFragment(layoutID, position) {
    private lateinit var table: LinearLayout

    override fun onCreate(view: View) {
        this.table = view.findViewById<LinearLayout>(R.id.test_layout)
        this.table.animation = AnimationUtils.loadAnimation(this.context, R.anim.fade_slide_in)
    }

    override fun onScroll(pageVisibility: Float) {
        this.table.alpha = pageVisibility
    }
}

目前，我只能实现 alpha 动画，因为我不知道如何实现百分比 y 移动。有什么帮助吗？

【讨论】：