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

概述我正在使用Flutter,我希望图像在我定义的点上旋转.例如,我想让图像为其右上角的旋转(向下摆动)设置动画.我该怎么做呢？ 这是一个使用 FractionalOffset类指定旋转点的解决方案. 如果你不想动画,Transform会做你想要的. return new Transform( transform: new Matrix4.rotationZ(math.PI), 我正在使用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徽标.

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

总结

以上是内存溢出为你收集整理的dart – 如何在图像内的任意点上旋转(并可能设置动画)图像？全部内容，希望文章能够帮你解决dart – 如何在图像内的任意点上旋转(并可能设置动画)图像？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。