加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

dart – 如何在图像内的任意点上旋转(并可能设置动画)图像?

发布时间:2020-12-14 14:56:13 所属栏目:百科 来源:网络整理
导读:我正在使用Flutter,我希望图像在我定义的点上旋转.例如,我想让图像为其右上角的旋转(向下摆动)设置动画.我该怎么做呢? 解决方法 这是一个使用 FractionalOffset 类指定旋转点的解决方案. 如果你不想动画, Transform 会做你想要的. return new Transform( tr
我正在使用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,);
  }
}

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,child: new Container(
                decoration: new BoxDecoration(backgroundColor: Colors.grey.shade200),width: 100.0,child: new FlutterLogo(style: FlutterLogoStyle.horizontal),),);
  }
}

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

enter image description here

如果您喜欢冒险,可以向Flutter发送拉取请求,以使RotationTransition的对齐可配置.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读