flutter礼物动画,动漫之家flutter

flutter-动画

1.动画原理：在一段时间内快速的多次改变UI外观，由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。

UI的一次改变称为一个动画帧，对应一次屏幕刷新。

FPS：帧率，每秒的动画帧数。

flutter动画分为两类：

常见动画模式：

是一个抽象类，主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类，可以是线性或者曲线或者其他。

可以生成除double之外的其他类型值，如：Animation Color 或 Animation Size 。

是一个动画控制器，控制动画的播放状态，在屏幕刷新的每一帧，就会生成一个新的值。

包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法，在给定的时间段内线性的生成从0.0到1.0（默认区间）的数字。

curve:描述动画的曲线过程。

curvedAnimation:指定动画的曲线。

常用Curve：

继承自Animatable T ，表示的就是一个 Animation 对象的取值范围，只需要设置开始和结束的边界值(值也支持泛型)。 它唯一的工作就是定义输入范围到输出范围的映射。

例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。

Tween.animate:返回一个Animation。

映射过程：

1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation)， 并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。

2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。

3). 这里的 animation 其实就是前面的 AnimationController 对象， transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。

接收一个TickerProvider类型的对象，它的主要职责是创建Ticker。

防止屏幕外动画消耗资源。

[图片上传失败...(image-115b94-1636441483468)]

过程：

回调：

不使用addListener()和setState()来给widget添加动画。

使用AnimatedWidget，将widget分离出来，创建一个可重用动画的widget，AnimatedWidget中会自动调用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染过渡，把渲染过程也抽象出来：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平台风格一致的路由切换动画

CupertinoPageRoute：左右切换风格

自定义：PageRouteBuilder

1.要创建交织动画，需要使用多个动画对象（Animation）。

2.一个AnimationController控制所有的动画对象。

3.给每一个动画对象指定时间间隔（Interval）

可以同时对其新、旧子元素添加显示、隐藏动画.

当AnimatedSwitcher的child发生变化时（类型或Key不同），旧child会执行隐藏动画，新child会执行执行显示动画。

希望大家支持一下，感谢

相关问答

Q1: Flutter上线项目实战——Vap视频动画

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架，最终我们选中 腾讯vap ，它支持了Android、IOS、Web，为我们封装flutter_vap提供了天然的便利，并且它提供了将帧图片生成带alpha通道视频的工具，这简直太赞了。

VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。

video for youtube

video for qiniu

apk download

github

Q2: Flutter listview下拉刷新，上拉加载更多封装

本文在 pull_to_refresh 的基础上对刷新做了封装，可以根据刷新状态自定义想要的头和尾。

本文刷新头和尾都使用的 lottie 动画,

lottie动画可以参考

接下来就可以在需要使用list view刷新的页面使用了 如下：

效果图：

Q3: 以前有个动画片，还出过玩具，真人演的，有龟田，有仙女，有几个战士，可呼唤出动物战神，还有几位魔将

芭比长发公主芭比胡桃夹子“

”芭比之天鹅湖“

”芭比娃娃的幻想日记“

”：公主芭比真BR /“芭蕾公主芭比娃娃12”

“芭比娃娃魔幻飞马之旅

”芭比梦幻仙境 - 彩虹仙子芭比之梦幻仙境 - 人鱼童话“芭比的梦幻仙境BR /”芭比之梦幻仙境 - 魔法彩虹

“ - 蝴蝶仙子芭比公主

芭比钻石城堡

芭比娃娃圣诞颂歌”

“闪亮登场，芭比与胡桃夹子”芭比娃娃睡美人“

芭比娃娃梦幻芭比之旅“

风靡全球40年来最深刻的印象之一，比辉煌的阴影，曼妙的身材和宁静的脸，这个可爱的娃娃身穿不同国籍，不同风格的时尚服装呆在那里，静静地等待着自己的主人。在2001年，芭比娃娃已经改变了过去固定的样子，突然动了起来。一直以来，数以千计的女孩渴望拥有芭比娃娃正式进军电影界，推出了她的首张动画电影“芭比与胡桃夹子的梦幻之旅”（芭比之胡桃夹子的梦幻之旅），这75分钟的动画电影是一个部长，致力于设计女孩和小女孩。电影通过状态 - 的 - 的 - 最先进的CGI电脑动画技术，一个新的解释霍夫曼的杰作“胡桃夹子”，的电影芭比扮演的女主人公克拉拉，她收到胡桃夹子的梦幻之旅给了她一个优良的生日礼物晚上睡觉，邪恶的邪恶的鼠王试图闯入并下了可怕的咒语，“胡桃夹子”，以保护克拉拉共同展开的幻想冒险的样子，善良的小精灵解危，最后魔法的诅咒解除，胡桃夹子变成了英俊的王子。

芭比首次亮相，在娱乐界的顶尖选手的集合，最先进的生产商相结合的环球影业CGI电脑动画制作，电影舞蹈编排的芭蕾大师彼得·马丁，舞蹈动作五由纽约市立芭蕾舞团的舞者，动作捕捉舞者曼妙的舞姿输入电脑绘制，舞蹈音乐由伦敦交响乐团演奏柴可夫斯基的悠扬运动。

------------------------------------------ -----------------

“芭比长发公主

很久很久以前，有一个很可爱的17岁女孩雷频率亚当斯，她有一个世界的最长，最美丽的头发。然而，雷频率亚当斯长大了嫉妒，邪恶的高强度法力女巫葛花拥有一个庄园的奴隶使唤，并调用，后来芽频率亚当斯发现一条秘密通道，以离开了庄园，遇见了王子斯蒂芬，并因此扩大之间的斗争与魔女的战斗。

已经有成千上万的女孩渴望拥有的芭比娃娃重现屏幕演绎的经典童话芭比之长发公主长发公主芭比（）在影片中，她追求自由和爱情，他是魔鬼锁定在设施魔塔，但他的勇敢，机智和想象力，几经周折，终于化险为夷。

- -------------------------------------------------- -------

“芭比之天鹅湖”

电影的经典剧目来自十九世纪以来，“芭比娃娃”天鹅湖“，并通过了新的诠释，改变过去简单的公主王子情节，讲述了一个普通的女孩出生在障碍凭借勇气，智慧和顽强的意志，和朋友，并最终战胜邪恶的故事。告诉人们：人们往往以自己的想象力，勇气，怀着无比的信心和毅力，都将有改变世界的力量。故事仍然是一??个动人的童话故事情节的原王子的爱情在美丽的天鹅，“真爱水平克服所有高贵的主题的整个动画片由电脑制作的，再加上一个精彩的现场芭蕾舞剧表现的柴可夫斯基的经典音乐，可谓是视觉和听觉的完美享受。

除了芭比敖德迪谁在影片中扮演女主角，芭比娃娃世界的朋友也玩精彩的表现：电影娃娃演员还包括芭比的男朋友肯扮演的丹尼尔王子，芭比娃娃最好的朋友邓丽君精灵女王的发挥，丽娜演奏的麒麟，芭比的朋友玩过其他生活在森林中的小动物。

美泰公司品牌部发言人说：“女孩爱是有魔力的真正的主题，动画片“芭比之天鹅湖”及其系列玩具的女孩在现实世界中的奇妙世界的解释的梦想，把芭比娃娃不断变化的。相信天鹅湖公主芭比比赛将成为爱的女孩。 “

----------------------------------------- ------------------

“芭比的奇幻日记

芭比奇幻日记，任何愿望成真！体验新的现代摩登芭比娃娃更难以捉摸的热情漂亮。经过一段时间非常奇幻的故事，以及与“友好的魔法，酷我音乐和流行的东西难以想象的频谱织女孩浪漫的情歌。无比期待着新学期的到来，他们可以党的整个晚上，欣赏乐队演奏电吉他，在您最喜爱的电视工作。差点忘了！您还可以看到学校的帅不是白马王子，但不幸的是，他不认识我，但没关系，我会想办法让头发注意到我。实践的祝福，幻想魔术手日记，??你所有的愿望都会逐一实现......

------------------------------------------ -----------------

公主芭比真正的“

他们是真假公主芭比。近日，多喜爱的芭比在她最新版本的音乐电影剧“芭比公主的真与假”，出场的两位主角 - 安妮硅公主Anneliese城堡一头金发，褐色的头发和一个贫穷的乡村女爱丽佳埃里卡，两个截然不同的身份，但它有同种和纯净的心，对爱的追求和梦想，最后，无论真假公主成为了好朋友，并揭露坏人的阴谋。这就是神奇的技术，一直是全世界人民最喜爱的芭比娃娃芭比娃娃的电影最具挑战性的角色，利用计算机影像不仅可以亲眼目睹芭比娃娃生动的屏幕，也能享受其甜美的歌声，这是芭比系列的一次新的尝试。的大生的文化即将到来的正版VCD，真与假公主芭比和芭比一起在梦幻般的童话时间和空间，找到真正的爱情。

幽默文学大师马克·吐温经典的“王子与乞丐”真假公主芭比“故事”百老汇著名作曲家领导创建的播放芭比娃娃与她的美妙歌声美妙的音乐，安娜卫兰演唱的“希望之歌”唱“爱情故事”，贾蔼力，让您体验到美妙的音乐，梦幻般的美。泰盛文化“真正的公主芭比“正版VCD建议零售价为26元，在中国和英国与中国的字幕，同时保留所有的歌曲在英语原声，易成芭比公主虚幻的真正的童话世界。

------------------------------------------------- ----------

“芭蕾公主芭比娃娃的12

芭比娃娃的12个芭比娃娃芭蕾公主”扮演公主简纳薇带来了许多惊人的芭蕾，踏上了奇怪的变化冒险。

公主简·贝尔纳11天，她姐姐芭蕾公主发现了一个神秘的通道，导致一个人梦想成真神奇的世界，但是这一次他们的父亲的脸给丢了王位危险。简诺维茨基公主和她的姐妹们一起工作，以挽救他们的父亲，并发现一个有价值的家人将克服所有的困难。

----------------------- ------------------------------------

“芭比娃娃魔幻飞马之旅 BR /新芭比3D场景梦幻上市！美丽的公主安妮卡住在欧洲北部山区。国王，王后是非常严格的保护和照顾我，活泼的安妮卡经常偷偷溜出去滑冰比赛日，她偷偷到回收一个可爱的小北极熊，并把它溜了出去，晚上的宫殿，滑冰方参与活泼，美丽的安妮卡优美的舞姿吸引了大家，这个时候，邪恶和强大的巫师突然出现，胁迫嫁给他，安妮卡不是她的父母从萨满的人变成了石头，关键时刻，飞马救出安妮卡原来，飞马压力失败，愤怒??的萨满被诅咒的妹妹安妮卡的鼓励和坚持下，我的妹妹，她又开始寻找传说中的萨满能够击败剑的光。寻找组成光之剑三的路，他们知道亚当，在他的帮助下艰辛，他们终于打败了巫师的诅咒，解除...全新的芭比娃娃的故事，通过童话幻想故事奇怪的环境中，您会遇到一个温暖，勇气，友谊，奇幻冒险。

---------------------------------------------- -------------

“芭比之梦幻仙境 - 彩虹仙子”

跨越彩虹可以到达芭比梦幻仙境......

花仙子翅膀，一直渴望拥有一对翅膀。魔草在她的家乡。有一天，她家花园的花都枯萎了，更严重的是她的翅膀的仙子朋友可以飞不起来。于是，她鼓起勇气找到一个监护人的仙女帮助解决这些挑战。然而，旅途中的困难，很多的痛苦，花仙子是否能经得起这些考验？她知道，真正的友谊吗？

---------------------------------------------- -------------“芭比之梦幻仙境 - 人鱼童话

”美人鱼“是一个扩展的”芭比梦幻仙境“的故事。

说明：

芭比梦幻仙境美人鱼艾哩捺（芭比）为了拯救她的朋友 - 人鱼王子拿路，必须放弃她美丽的翅膀，化身为美人鱼。邪恶的女雾露魏嗯啊绑架了人鱼王子走的路，想借用他的力量成为仙境的统治者，只有艾丽南阻止这一切，但她独自一人的力量是不够的，她必须与洛离洛里的帮助。是一条美人鱼不想相信别人，希望能帮助她不爱娜，艾丽纳诚意说服洛里等待艾丽娜是更难的挑战。要救出艾丽纳必须走的道路，放弃了她最珍贵的翅膀。艾离钠可以做到这一点，如果她失败了，仙境始终控制在手中的陆维娜...

----------------- -----------------------------------------

“芭比的梦幻仙境 - 魔法彩虹“

神奇的芭比彩虹仙子彩虹（又名：的芭比娃娃Fairytopia魔术的彩虹）

芭比扮演的莉娜了一个全新的仙境冒险！比波，根据Lena和她的小蘑菇仙女学校坐落在华丽的水晶宫殿寺庙走到了一起。在那里，她结识了与其他仙女的学生，更要学会每年春季航班，以及如何神奇绘制本赛季的第一个彩虹。

但是，当邪恶的LA威诺试图中止飞行，这十年进入冬季仙境，根据Lena和她的新朋友一定要学会“团结就是力量”。但是，如果他们强大到足以打败La维那，彩虹的天空再次就挂断了？

---------------------- ------------------------------

“芭比梦幻仙境 - 蝴蝶仙子

/

故事：有一天晚上，思念素素做了苏苏比宝娃娃，因为结果打破了。埃莉诺知道的是，为了鼓励它，给它一个蝴蝶仙子的故事：的人Ruisuo是一个蝴蝶仙子，她具有良好的的朋友薇拉和两个双胞胎妹妹。有一天，她收到一个地图的王子，问她去圣地寻找方法来保存皇后。于是，她和她的两个姐妹关闭。在同一时间，维拉，女王的坏仙女汗娜毒死，因此，救出被软禁的王子，并发现汉娜。神奇的花带Houmanruisuo吾皇，并返回到仙女Flutterfield（蝴蝶内部），并保存女王的花朵。汉娜应该结束了。最后，女王给的荣誉花环的人拉瑞沙等。谢谢它们保存Flutterfield。

----------- -------------------------------------------------- -----

芭比公主。

迅速森林公主芭比一起玩去了，你会享受这种原始的音乐电影9梦幻般的首新的歌曲！女孩：罗司旯（发挥的昵称）不幸遭遇海难被困在一个荒岛上，她在一个家庭的爱护动物长大，学会说话的动物和唱歌。她亲人的动物，包括小熊猫萨奇曾祖父，孔雀和大象宝宝诺蒂卡。但是，当安东尼奥王子发现了这个热带天堂，罗司喇好奇，决定去他的城堡与王子自己的生活经验。，虽然罗司腊和她的动物伙伴与探索文明世界，他们无意中发现了一个试图夺权从邪恶的阴谋！完美的结局的电影，“芭比公主”告诉我们：让爱引领你，奇迹就在眼前。

是一个美丽的岛屿，有一天，女孩被冲上岸，风雨让她失忆，她认为动物在岛上，她有朋友

王子航行到了岛上，迷上了这个女孩叫露露，想带她回他的宫殿，露露两种动物的朋友同意，不同意，只有一小象

国王安排的公主，王子，公主是个非常善良，受过良好教育，对爱的渴望，她没有像婚姻，但她的母亲想抢夺王国的设计也摆脱露露，露露为了自己心爱的王子又回到了她的祖国，帮助王子，国王也同意王子结婚露露，露露也找到自己的母亲 - 温柔的公爵夫人还记得他原来的名字 - 卢西镎

在婚礼上，善良的公主也找到了合适的人

电影漂亮???在电影中一直是险恶的第三方也是一个有教养的女孩，还是一部好电影?

------------------------ ----------------------------------------

芭比钻石城堡（芭比钻石城堡）

介绍

远，一个拥有音乐和神奇的土地，是两个漂亮的女孩。利昂娜和Alicia（芭比和Teresa），他们将分享一切的最好的朋友，尤其是当他们爱唱歌。有一天，当他们穿过森林，他们发现一旁的魔法镜。当他们清理镜子，唱歌，魔术发生了！一个女孩叫美??国安切洛蒂出现在表面上的镜子。美国安切洛蒂美国安切洛蒂解释说，钻石城堡。钻石城堡的秘密告诉他们，是所有音乐的家，三个音乐缪丝永久居住的地方。巴塞洛缪丝丽康宏直到一个邪恶的企图钻石城堡拨款的。

她需要的另外两个缪丝钻石城堡的关键委托到美国安切洛蒂托管的。之后，为了保障安全的关键美国安切洛蒂自己藏在镜子。但现在她不能脱身。利昂娜和爱丽莎的帮助下，她把照镜子，然后去拯救钻石城堡。于是两个女孩开始了旅程 - 离开家远的旅程，在旅途中，他们得到认识新的朋友和敌人。但友谊的力量能不是一个胜利？

----------------------------------------- --------------------------

“芭比娃娃圣诞颂歌”

芭比娃娃圣诞颂歌是一个温暖心灵的经典狄更斯的故事。填充珍爱的圣诞颂歌，漂亮的衣服和很多的笑话！芭比娃娃玩，在这个故事里的伊甸园椋鸟，一个富有魅力的，在维多利亚时代的伦敦歌剧院的女主唱。她和检查她的傲慢猫淡褐色威特，，伊甸自私的计划以使所有在剧院的演员左到排练圣诞节！即使伊甸园的服装设计人员和儿时的朋友，凯瑟琳也没有说服她以自我为中心的脾气。这是不寻常的3圣诞节的精神知道他们的伊甸园带到一个奇妙的旅行使打开她的心向着本赛季的精神和给予的快乐。芭比娃娃圣诞颂歌“是一个家庭最喜爱的动画电影在节日

----------------- -------------------------------------------

芭比娃娃睡美人“（2009年）

芭比娃娃睡美人睡美人芭比

芭比扮演克拉玛格丽特公主。她出生的时候打开，将是一个盛大的庆祝活动。当时，所有皇室的童话”和非“皇家童话邀请。最有名的童话：罗丝儿，菊花，金盏花，大丽花，紫丁香，茉莉和薰衣草，他们每个人给了公主一份特殊的礼物。当最后一个仙女薰衣草还是要送礼物的时间，邪恶的巫婆吉米达的出现，而她的诅咒克拉玛格丽特她16岁的时候，她的手指在纺车针坏了，死了。薰衣草为了阻止这个咒语，当克拉玛格丽特手指刺破时，她将熟睡，而不是死亡。即便如此，王还下令，在王国所有的纺车被烧毁。

16年后克拉玛格丽特公主发现了一个神奇的世界，看到那里的七仙女和其他朋友。不知道她打算击败吉米达七仙女 - 她的妹妹！当王子里卡多来到他们的仙境，克拉玛格丽特下跌爱上了他。

------------- -------------------------------------------------- -------

“芭比梦幻仙境 - 穿越时空”（芭比娃娃Fairytopia：魔法扭曲的时间）

的电影芭比扮演埃莉诺比宝和她的魔法草原上玩的时候暴露维娜吃了美人鱼的魔法草莓的国家，这让她过去，现在和未来的力量，然后，她开始扭转时间的过去，而埃莉诺变回一个没有翅膀的仙子，不知道发生了什么事。陆维娜后，开始释放的飞行病毒，杀死所有的植物，并采取了飞行的能力。了解这一切，埃莉诺和比宝踏上了漫长的旅程。他们看到了不同的仙友了，还是展翅培训镇看到的人Ruisuo！依靠的人拉瑞沙，德国汉莎宝丝，露美娜诗姬韩国，委内瑞拉，瑞纳，单练，罗厘，以及许多其他朋友的帮助，埃莉诺有足够的勇气战胜邪恶的露维娜，并找到金色的魔杖。的的仙女翅膀在拯救仙境？

--------------------------------- -----------------------------------

芭比电影（2001?2015年）

1。芭比之胡桃夹子的梦幻之旅（2001）芭比之长发公主芭比与胡桃夹子的梦幻之旅]

2（2002）[芭比长发公主]

芭比娃娃芭比娃娃“天鹅湖”“天鹅湖”（2003年）

4芭比公主与乞丐（2004）[芭比真假公主]

5：芭比娃娃Fairytopia（2005）[芭比的梦幻中的仙境]

6。芭比娃娃和魔术的飞驹“（2005年）[芭比魔术飞马]

芭比Fairytopia Mermaidia（2006）芭比梦幻仙境美人鱼

芭比日记”（2006年）芭比奇幻日记]

9芭比的12个跳舞的公主（2006）[芭比12舞蹈公主

10个芭比Fairytopia;神奇的彩虹（2007）[芭比梦幻仙境魔法彩虹]

11。普拉斯兰岛公主芭比（2007年[芭比公主]）

12。蝴蝶仙子芭比马里波萨（2008）[芭比娃娃]

13。芭比与钻石城堡（2008）[芭比之钻石城堡]

14芭比娃娃在A cristmas颂歌（2008）[芭比娃娃圣诞颂歌]

15芭比拇指姑娘（2009）[芭比拇指姑娘

16个芭比娃娃Fairytopia神奇的扭转，通过时间和空间的时间（2009年）

17芭比之睡美人（2009）[芭比梦幻仙境芭比娃娃睡美人]

18。灰姑娘（2009）[芭比娃娃，芭比娃娃灰姑娘]

20芭比三公主姐妹（2010）[芭比与三姐妹公主]

21芭比美人鱼公主（2011）[芭比美人鱼]

22。芭比娃娃与魔法彩虹公主（2011年）[芭比娃娃魔法彩虹公主]

23。芭比娃娃的水晶河（2011）[芭比娃娃水晶河

24。芭比为Elisabella（2012）芭比伊丽莎白]

25芭比娃娃白雪公主（2012）[芭比娃娃白雪公主]

26芭比公主和豌豆（2012）[芭比公主和豌豆]

27。芭比娃娃的秘密花园（2013）[芭比娃娃的秘密花园]

28。黑美人芭比娃娃的黑美人（2013）[芭比娃娃]

29。芭比娃娃和雪之女王（ 2014）[芭比雪之女王

30。芭比娃娃和魔术的晶体（2015）[芭比娃娃魔晶

Q4: TweenAnimationBuilder 说明

当我们想创建一个自定义的隐式动画时，我们可以使用TweenAnimationBuilder.

中文说明

假设你想创建一个基础的动画，这个动画不会永远重复。它仅仅是一个组件或则一个组件树。Flutter有一个惯例，将其隐式动画小部件命名为AnimatedFoo。

tween 设置动画的值。开始xxx 结束xxx

builder: 第一个参数是BuildContext,第二个是value取决于你要设置的动画数据。第三个参数子组件，用于优化.

同时还可以设置运动曲线 curve。

onEnd监听，可以在动画完成时，进行下一步动作

设置子Widget参数时潜在性能的优化。意思是说

builder中的child可以提前构建。以参数的方式传递尽力啊。flutter会自动唯一的小部件是什么，它将会需要逐帧重建新的内容。而不是其实图像的本身。（如果时小的组件，没啥必要，但是如果是巨大的动画。作用应该会很明显）

Q5: flutter-实现一个简单的展开收起动画

使用Tween动画,改变控件距左距离

展开时,展示菜单控件,动画正向执行;收起后,动画反向执行,隐藏菜单控件;