一、CustomClipper

e…flutter开发实战-CustomClipper裁剪长图帧动画效果

在开发过程中经常遇到帧动画的每一帧图显示在超长图上需要处理这种帧动画效果。

我这里使用的是CustomClipper

一、CustomClipper

{PicCustomClipper(this.rect);Rect

rect;//

}getClip()是用于获取剪裁区域的接口由于图片大小是60×60我们返回剪裁区域为Rect.fromLTWH(10.0,

15.0,

如果在应用中剪裁区域始终不会发生变化时应该返回false这样就不会触发重新剪裁避免不必要的性能开销。

如果剪裁区域会发生变化比如在对剪裁区域执行一个动画那么变化后应该返回true来重新执行剪裁。

二、实现播放帧动画

CustomClipper裁剪长图后每隔一段时间展示长图的不同区域实现帧动画的连贯效果。

class

imageSize;override_PicFrameAnimState

createState()

PicCustomClipper(Rect.fromLTWH(0.0,

0.0,

widget.size.height));overridevoid

initState()

initStatesuper.initState();_duration

200);_imageIndex

widget.size.height).floor();}if

(_imageIndex

PicCustomClipper(Rect.fromLTWH(0.0,_currentIndex

(widget.size.height),widget.size.width,widget.size.height));_currentIndex;if

(mounted)

{updateImage();}});}overridevoid

dispose()

disposesuper.dispose();}Matrix4

buildMatrix4()

(widget.size.height);///在XOY平面的平移return

dy,

Transform(///构建Matrix4transform:

buildMatrix4(),///中心对齐alignment:

ClipRect(clipper:

buildBGArrow(context),),),);}Widget

context)

Image.network(https://avatars2.githubusercontent.com/u/20411648?s460v4,width:

100.0,height:

flutter开发实战-CustomClipper裁剪长图帧动画效果。

https://blog.csdn.net/gloryFlow/article/details/132253251