bessel_tween 0.1.1 copy "bessel_tween: ^0.1.1" to clipboard
bessel_tween: ^0.1.1 copied to clipboard

Calculate the position of the point (Offset) on the Bessel curve according to time t (0.0-1.0)

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'package:bessel_tween/bessel_tween.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '贝塞尔运动',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('贝塞尔曲线动画'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> besselAnimation;
  double w = 300; //画布宽度
  double h = 300; //画布高度
  var pointList;

  @override
  void initState() {
    // 创建贝塞尔曲线的三个控制点
    pointList = [Offset(0, 0), Offset(250, 20), Offset(w, h)];

    // 初始化控制器
    controller = AnimationController(
        duration: Duration(milliseconds: 3000), vsync: this);
    // 初始化贝塞尔曲线动画,传入三个控制点
    besselAnimation = BesselTween(pointList).animate(controller);
    controller.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CustomPaint(
          size: Size(w, h),
          painter: Ball(besselAnimation.value, pointList),
        ),
        Container(
          padding: EdgeInsets.only(top: 8),
          child: RaisedButton(
            onPressed: () {
              controller.reset();
              controller.forward();
            },
            child: Text('开始动画'),
          ),
        )
      ],
    );
  }
}

/// 自定义小球绘制
class Ball extends CustomPainter {
  final Offset offset; //小球的位置
  final List<Offset> pointList; // 所有的控制点

  const Ball(this.offset, this.pointList);

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制背景
    Paint paint = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 1
      ..color = Colors.blue.withOpacity(0.2);

    canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height), paint);

    paint.color = Colors.blue;

    // 绘制连接所有控制点的线
    Offset currentPoint = pointList[0];
    for (int i = 1; i < pointList.length; i++) {
      canvas.drawLine(currentPoint, pointList[i], paint);
      currentPoint = pointList[i];
    }

    // 绘制小球
    canvas.drawCircle(offset, 10, paint);
  }

  @override
  bool shouldRepaint(Ball oldDelegate) {
    if (offset.dx == oldDelegate.offset.dx &&
        offset.dy == oldDelegate.offset.dy) {
      return false;
    } else {
      return true;
    }
  }
}
0
likes
25
pub points
0%
popularity

Publisher

unverified uploader

Calculate the position of the point (Offset) on the Bessel curve according to time t (0.0-1.0)

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on bessel_tween