我正在使用Flutter ,我想让图像在我定义的点上旋转.例如,我希望图像在其右上角设置旋转动画(向下摆动).我该怎么做呢?

推荐答案

下面是一个使用FractionalOffset类指定要旋转的点的解决方案.

如果你不想做动画,Transform会做你想做的.

    return new Transform(
      transform: new Matrix4.rotationZ(math.PI),
      alignment: FractionalOffset.bottomRight,
      child: child,
    );

如果你真的想设置动画,RotationTransition几乎可以做你想要的,除了对齐是不可配置的.您可以制作自己的可配置版本:

import 'dart:ui';
import 'dart:math' as math;
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      title: "Rotation Demo",
      home: new RotateDemo(),
  ));
}

/// Animates the rotation of a widget around a pivot point.
class PivotTransition extends AnimatedWidget {
  /// Creates a rotation transition.
  ///
  /// The [turns] argument must not be null.
  PivotTransition({
    Key key,
    this.alignment: FractionalOffset.center,
    @required Animation<double> turns,
    this.child,
  }) : super(key: key, listenable: turns);

  /// The animation that controls the rotation of the child.
  ///
  /// If the current value of the turns animation is v, the child will be
  /// rotated v * 2 * pi radians before being painted.
  Animation<double> get turns => listenable;

  /// The pivot point to rotate around.
  final FractionalOffset alignment;

  /// The widget below this widget in the tree.
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final double turnsValue = turns.value;
    final Matrix4 transform = new Matrix4.rotationZ(turnsValue * math.PI * 2.0);
    return new Transform(
      transform: transform,
      alignment: alignment,
      child: child,
    );
  }
}

class RotateDemo extends StatefulWidget {
  State createState() => new RotateDemoState();
}

class RotateDemoState extends State<RotateDemo> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override initState() {
    super.initState();
    _animationController = new AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    )..repeat();
  }

  @override dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body:
          new Center(
            child: new PivotTransition(
              turns: _animationController,
              alignment: FractionalOffset.bottomRight,
              child: new Container(
                decoration: new BoxDecoration(backgroundColor: Colors.grey.shade200),
                width: 100.0,
                child: new FlutterLogo(style: FlutterLogoStyle.horizontal),
              ),
            ),
          ),
    );
  }
}

此示例绕右下角旋转Flutter 徽标.

enter image description here

如果你喜欢冒险,你可以发送一个pull请求,让RotationTransition的对齐方式可配置.

Dart相关问答推荐

DART列表由以奇怪方式链接的列表(即二维数组)组成

寻找provider context 的flutter问题

什么时候在 Dart 中使用interfaces接口?

在`lib`文件夹中使用`src`子文件夹有什么好处吗

有没有办法在Flatter中使用PageView实现无限循环?

如何在 Flutter 中渲染单个像素?

Flitter中的谷歌 map 没有出现

如何 Select 性地传递可选参数?

在 Dart 中发送 SMTP 邮箱

为什么不推荐使用 context2d.backingStorePixelRatio?

Dart - 如何在每次测试之后或之前运行函数?

Dart - 将自纪元以来的毫秒数(UNIX 时间戳)转换为人类可读的时间

dart中的max/mi int/double 值是否有常数?

从 Dart 应用访问 pubspec.yaml 属性

Dart 会支持服务器端开发吗?

使用 VSCode 创建和运行 Dart 控制台应用程序?

Dart 中的 urlencoding

何时在 Dart 中使用 part/part of 与 import/export?

Dart 语言中的 Console.log

extends与 implements与 with