小编Lak*_*tta的帖子

我有一个场景，它有一个开始约束布局和一个结束。问题是，滑动动画很突然。它只是在单个帧中将开始到结束以及结束到开始进行转换，并且不进行动画处理。Onclick 手势确实有动画效果，但我想使用滑动手势

xml 文件夹内的motionscene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetStart="@layout/backdrop_layout_end"
        motion:constraintSetEnd="@layout/backdrop_layout_start"
        motion:motionInterpolator="easeInOut"
        motion:transitionDisable="false"
        motion:duration="200">

        <OnSwipe
            motion:touchAnchorId="@id/toggle"
            motion:dragDirection="dragDown"
            motion:maxAcceleration=".5"
            />

    </Transition>

</MotionScene>

布局文件夹内的layout_start.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:motion="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/backdrop_back"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@color/amber_800"

        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/backdrop_front"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintVertical_bias="1"
        android:background="@drawable/upper_rounded_corners"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <ImageView
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="@dimen/margin_10"

            android:id="@+id/toggle"
            android:layout_gravity="center"
            android:src="@drawable/ic_adjust"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

布局文件夹中的layout_end.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:motion="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/backdrop_back"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" …

我正在创建一个 UNO 游戏应用程序，这是介绍屏幕部分。我需要一种非常自定义的动画，并且我对颤动自定义动画没有太多了解。

这是一个小预览

现在我想创建一个“卡片飞来飞去”的动画。它基本上是卡片（带有 svg 资源的容器）在屏幕上同时平移和旋转，以创建飞行卡片效果。该动画将一遍又一遍地重复。

我已经成功制作了一个非常基本的版本，它只是平移，不旋转，而且看起来不太漂亮。这是代码。

内屏

class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 4));
    _animation = RainbowColorTween([
      CardColors.COLOR1,
      CardColors.COLOR2,
      CardColors.COLOR3,
      CardColors.COLOR4,
      CardColors.COLOR1,
    ]).chain(CurveTween(curve: Curves.easeInOut)).animate(_controller);
    _controller.addListener(() {
      setState(() {});
    });
    _controller.repeat();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          color: _animation.value,
          child: ChangeNotifierProvider<_DataModel>(
            create: (context) => _DataModel(),
            child: …

我正在 flutter 中开发，我的 logcat 总是充满这些日志

W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putLong(Ljava/lang/Object;JJ)V (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putObject(Ljava/lang/Object;JLjava/lang/Object;)V (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putObject(Ljava/lang/Object;JLjava/lang/Object;)V (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->getInt(Ljava/lang/Object;J)I (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putInt(Ljava/lang/Object;JI)V (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putObject(Ljava/lang/Object;JLjava/lang/Object;)V (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->getInt(Ljava/lang/Object;J)I (greylist,core-platform-api, linking, allowed)
W/ample.wmbsende( 6845): Accessing hidden method Lsun/misc/Unsafe;->putInt(Ljava/lang/Object;JI)V (greylist,core-platform-api, linking, allowed)
I/ample.wmbsende( 6845): Background …

我有一个按钮，当它悬停在上面时，它有一个缩放和旋转效果。我想达到这些效果，但持续时间不同。基本上，我想实现这样的目标

.button {    
   transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
   transform: scale(1.111, 1.111) rotate(360deg);
}

这样做的任何捷径？这甚至可能吗？

概念示例

.button{
  transition[scale]: .1s;
  transition[rotate]: .5s
}

编辑：实际上，已经存在的解决方案适用于 2 个不同的属性（height和opacity），而我的是在一个属性（transform）上，但transform有 2 种模式，rotate和scale，需要以不同的时间进行动画处理。我需要transform:rotate带.5s和transform:scale带.1s

编辑2：有人提到了动画的使用，所以这就是我所做的

.button {    
   transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover …

我制作了这张自定义卡（来自 UNO 游戏），看起来像

我使用 ColorTween 在 1 秒内更改容器的 boxshadow 属性，代码如下

class SpecialUnoCard extends StatefulWidget {
  final String _value;
  SpecialUnoCard(this._value);

  @override
  _SpecialUnoCardState createState() => _SpecialUnoCardState();
}

class _SpecialUnoCardState extends State<SpecialUnoCard>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;
  int index = 0;

  final _listOfTweens = [
    ColorTween(begin: red, end: blue),
    ColorTween(begin: red, end: green),
    ColorTween(begin: red, end: orange),
    ColorTween(begin: blue, end: red),
    ColorTween(begin: blue, end: green),
    ColorTween(begin: blue, end: orange),
    ColorTween(begin: green, end: red),
    ColorTween(begin: green, end: blue),
    ColorTween(begin: green, end: orange), …