이미지 내부의 임의의 점에서 이미지를 회전시키고 애니메이션을 적용 할 수 있습니까?

Question

나는 Flutter를 사용하고 있으며 정의한 지점에서 이미지를 회전하고 싶습니다. 예를 들어 이미지의 오른쪽 상단 모서리에서 회전 (애니메이션 스윙) 애니메이션을 적용하고 싶습니다. 어떻게해야합니까?

Answer 1

다음은 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 로고를 회전합니다.

당신이 모험을 좋아하는 경우 플러터에게 RotationTransition의 맞춤 구성 할 수 있도록 끌어 오기 요청을 보낼 수 있습니다.