Flutter 使用动画播放一组图片

栏目: Android · 发布时间: 5年前

效果如下图:

Flutter 使用动画播放一组图片

代码

import 'package:flutter/material.dart';
import 'package:sprintf/sprintf.dart';  //这个是一个拼接字符串的flutter库,主要是为了使用方便,你可以选择不使用,这样的话你需要自己拼接图片路径

class ImagesAnimation extends StatefulWidget {

  final double w;
  final double h;
  final ImagesAnimationEntry entry;
  final int durationSeconds;

  ImagesAnimation({Key key, this.w : 80, this.h : 80, this.entry, this.durationSeconds : 3}):super(key:key);


  @override
  _InState createState() {
    return _InState();
  }
}

class _InState extends State<ImagesAnimation> with TickerProviderStateMixin{

  AnimationController _controller;
  Animation<int> _animation;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(vsync: this, duration: Duration(seconds: widget.durationSeconds))
      ..repeat();
    _animation = new IntTween(begin: widget.entry.lowIndex, end: widget.entry.highIndex).animate(_controller);
//widget.entry.lowIndex 表示从第几下标开始,如0;widget.entry.highIndex表示最大下标:如7
  }

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        String frame = _animation.value.toString();
        return new Image.asset(
          sprintf(widget.entry.basePath, [frame]), //根据传进来的参数拼接路径
          gaplessPlayback: true, //避免图片闪烁
          width: widget.w,
          height: widget.h,
        );
      },
    );
  }

}

class ImagesAnimationEntry {
  int lowIndex = 0;
  int highIndex = 0;
  String basePath;

  ImagesAnimationEntry(this.lowIndex, this.highIndex, this.basePath);
}

使用的地方:

ImagesAnimation(w: 100, h: 100, entry: ImagesAnimationEntry(1, 7, "images/men_sport_%s.png")),
//"images/men_sport_%s.png" 表示图片在你本地的路径,%s会被下标代替

热度: 20


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learn Python 3 the Hard Way

Learn Python 3 the Hard Way

Zed A. Shaw / Addison / 2017-7-7 / USD 30.74

You Will Learn Python 3! Zed Shaw has perfected the world’s best system for learning Python 3. Follow it and you will succeed—just like the millions of beginners Zed has taught to date! You bring t......一起来看看 《Learn Python 3 the Hard Way》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试