flutter中的動畫交織動畫

有時(shí)候一個(gè)完整的動畫可能是由不同的動畫疊加起來奸焙,如一個(gè)動畫執(zhí)行完成在執(zhí)行另一個(gè)動畫哟冬,這時(shí)候我們需要多個(gè)動畫對象(Animation)各墨,但是我們不需要多個(gè)動畫控制器(AnimationController)伴箩,只需要給每一動畫對象設(shè)置時(shí)間間隔(Interval)赠潦。

有動畫都由同一個(gè)AnimationController (opens new window)驅(qū)動,無論動畫需要持續(xù)多長時(shí)間招驴,控制器的值必須在0.0到1.0之間篙程,而每個(gè)動畫的間隔(Interval)也必須介于0.0和1.0之間。對于在間隔中設(shè)置動畫的每個(gè)屬性别厘,需要分別創(chuàng)建一個(gè)Tween (opens new window)用于指定該屬性的開始值和結(jié)束值虱饿。也就是說0.0到1.0代表整個(gè)動畫過程,我們可以給不同動畫指定不同的起始點(diǎn)和終止點(diǎn)來決定它們的開始時(shí)間和終止時(shí)間触趴。

示例
圓形先縮小然后改變透明度

 AnimationController animationController;
 Animation<double> animationSize;
 Animation<double> animationOpacity;
animationController =
 AnimationController(duration: Duration(seconds: 2), vsync: this);
animationSize = Tween<double>(begin: 80, end: 60).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(
          0.0, 0.6, //間隔氮发,前60%的動畫時(shí)間
          curve: Curves.ease,
        ),
      ),
    );
    animationOpacity = Tween(begin: 1.0, end: 0.5).animate(CurvedAnimation(
        parent: animationController,
        curve: Interval(0.6, 1, curve: Curves.easeIn)));

 animationController.forward();

         Container(
              width: MAX_SIZE + 50,
              height: MAX_SIZE + 50,
              color: Colors.blue,
              //不加這一句子container 會變得和父container 大小一樣
              alignment: Alignment.center,
              child: Opacity(
                opacity: animationOpacity.value,
                child: Container(
                  width: animationSize.value,
                  height: animationSize.value,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(MAX_SIZE / 2),
                  ),
                  child: Icon(
                    Icons.mic,
                    color: Colors.white,
                  ),
                  // transform:
                  //     Matrix4.rotationY(animationTransform.evaluate(animation)),
                ),
              ),
            ),

注意setstate方法更新視圖

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市冗懦,隨后出現(xiàn)的幾起案子爽冕,更是在濱河造成了極大的恐慌,老刑警劉巖披蕉,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颈畸,死亡現(xiàn)場離奇詭異,居然都是意外死亡没讲,警方通過查閱死者的電腦和手機(jī)眯娱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來爬凑,“玉大人徙缴,你說我怎么就攤上這事∴倚牛” “怎么了娜搂?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵迁霎,是天一觀的道長吱抚。 經(jīng)常有香客問我百宇,道長,這世上最難降的妖魔是什么秘豹? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任携御,我火速辦了婚禮,結(jié)果婚禮上既绕,老公的妹妹穿的比我還像新娘啄刹。我一直安慰自己,他們只是感情好凄贩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布誓军。 她就那樣靜靜地躺著,像睡著了一般疲扎。 火紅的嫁衣襯著肌膚如雪昵时。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天椒丧,我揣著相機(jī)與錄音壹甥,去河邊找鬼。 笑死壶熏,一個(gè)胖子當(dāng)著我的面吹牛句柠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播棒假,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼溯职,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了帽哑?” 一聲冷哼從身側(cè)響起谜酒,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祝拯,沒想到半個(gè)月后甚带,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡佳头,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年鹰贵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片康嘉。...
    茶點(diǎn)故事閱讀 39,926評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡碉输,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出亭珍,到底是詐尸還是另有隱情敷钾,我是刑警寧澤枝哄,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站阻荒,受9級特大地震影響挠锥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜侨赡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一蓖租、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧羊壹,春花似錦蓖宦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至情妖,卻和暖如春睬关,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鲫售。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工共螺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人情竹。 一個(gè)月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓藐不,卻偏偏與公主長得像,于是被迫代替她去往敵國和親秦效。 傳聞我的和親對象是個(gè)殘疾皇子雏蛮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 交織動畫 有些時(shí)候我們可能會需要一些復(fù)雜的動畫,這些動畫可能由一個(gè)動畫序列或重疊的動畫組成阱州,要實(shí)現(xiàn)這種效果挑秉,使用交...
    zombie閱讀 471評論 0 1
  • Flutter的動畫體系是怎么運(yùn)作的,各組件之間的關(guān)聯(lián)關(guān)系及原理什么苔货,隱式動畫犀概、顯式動畫怎么區(qū)分,本文將會進(jìn)行詳細(xì)...
    whqfor閱讀 2,011評論 0 6
  • 如果我們想要一些東西動畫夜惭,我們必須改變大小或改變連續(xù)幀中對象的位置姻灶。例如,在第1幀中诈茧,我們的對象位于位置x产喉,在第2...
    開心人開發(fā)世界閱讀 2,057評論 0 8
  • 交錯(cuò)動畫 你將學(xué)習(xí)到什么: 交錯(cuò)動畫由序列或重疊的動畫組成。 要?jiǎng)?chuàng)建交錯(cuò)動畫,使用多個(gè)動畫對象曾沈。 一個(gè)Animat...
    文vane閱讀 1,254評論 0 1
  • 參考來源:https://flutterchina.club/animations/ 動畫類型 補(bǔ)間(Tween)...
    _白羊閱讀 18,213評論 2 11