写点什么

Flutter 绘制 -11- 旋转小人儿造成的视觉错效

用户头像
Android架构
关注
发布于: 20 小时前

AnimationController _controller;@overridevoid initState() {super.initState();_controller = new AnimationController(vsync: thi


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


s, duration: const Duration(milliseconds: 1500));_controller.repeat();}


@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("旋转小人儿"),centerTitle: true,),body: CustomPaint(size: MediaQuery.of(context).size,painter: _MyPainter(_controller),),);}}


class _MyPainter extends CustomPainter {AnimationController _controller;


_MyPainter(this._controller) : super(repaint: _controller);


@overridevoid paint(Canvas canvas, Size size) {translateToCenter(canvas, size);double dy = 10 * sin(pi * 2 * _controller.value);Path path = new Path()..moveTo(30 * sin(pi * 2 * _controller.value), dy)..lineTo(100 * sin(pi * 2 * _controller.value), 220 + dy)..moveTo(0, dy)..lineTo(0, 200 + dy)..lineTo(300, 200 + dy)..lineTo(-300, 200 + dy);Paint paint = new Paint()..color = Colors.black..style = PaintingStyle.stroke..strokeWidth = 2..isAntiAlias = true;canvas.drawPath(path, paint);}


@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}


void translateToCenter(Canvas canvas, Size size) {canvas.translate(size.width / 2, size.height / 2);}}

第二版效果

又仔细观察好像是斜对角的线,即


  • 线的上端点,移动方向,左->右

  • 线的下端点,移动方向,右->左

  • 围绕着 y 轴旋转,y 的坐标上下有波动,x 的值通过 radius_sin(pi_2*_controller.value)获取。(_controller 是设定的一个动画,value 取值范围在 0-1,radius 是旋转半径)


再看下效果:



是不是有那个味儿了。。。


最后,代码如下:


import 'dart:ui';import 'dart:math';


import 'package:flutter/material.dart';


// 旋转小人儿 class RotateGirlMainPage extends StatefulWidget {@override_RotateGirlMainPageState createState() => _RotateGirlMainPageState();}


class _RotateGirlMainPageState extends State<RotateGirlMainPage>with SingleTickerProviderStateMixin {AnimationController _controller;@overridevoid initState() {super.initState();_controller = new AnimationController(vsync: this, duration: const Duration(milliseconds: 1500));_controller.repeat();}


@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("旋转小人儿"),centerTitle: true,),body: CustomPaint(size: MediaQuery.of(context).size,painter: _MyPainter(_controller),),);}}


class _MyPainter extends CustomPainter {AnimationController _controller;


_MyPainter(this._controller) : super(repaint: _controller);


@overridevoid paint(Canvas canvas, Size size) {translateToCenter(canvas, size);double dy = 10 * sin(pi * 2 * _controller.value);Path path = new Path()..moveTo(30 * -sin(pi * 2 * _controller.value), -100+dy)..lineTo(100 * sin(pi * 2 * _controller.value), 220 + dy);Paint paint = new Paint()..color = Colors.black..style = PaintingStyle.stroke..strokeWidth = 2..isAntiAlias = true;canvas.drawPath(path, paint);}


@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}void translateToCenter(Canvas canvas, Size size) {canvas.translate(size.width / 2, size.height / 2);Paint paint = new Paint()..color = Colors.black12..style = PaintingStyle.stroke

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter绘制-11-旋转小人儿造成的视觉错效