iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 2157 瀏覽

鐵人賽自我挑戰組 DAY 12

從積木開始學程式系列第 12 篇

技術 [DAY>12<]在APP內加上Lottie動畫 (Animation介紹與應用)

在APP的開頭展示一下自己的LOGO或者是企業的LOGO，對使用者的印象會有所加分。接下來今天就教大家如何利用Animation加入來自Lottie的動畫首先...

米茶加豆奶 ‧ 2018-10-27

0 Like 0 留言 2026 瀏覽

鐵人賽 Software Development DAY 26

iOS Swift x Layout x Animation x Transition 系列第 26 篇

技術 LoadingAnimation - 彈跳的三個點

LoadingAnimation - 彈跳的三個點動畫為三個點依次落下然後回到原來的位置上。 LoadingView 單個點的上下動畫通過 UIView...

陳董 Don ‧ 2018-01-14 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1835 瀏覽

鐵人賽 Software Development DAY 5

iOS Swift x Layout x Animation x Transition 系列第 5 篇

技術 ImageSlider - 圖片轉換動畫

通過一些簡單的動畫，可以讓圖片在切換的過程變得有趣許多。 ImageSlider 在 ViewController 的正中央放置一個 UIImageView...

陳董 Don ‧ 2017-12-24 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1726 瀏覽

鐵人賽 Software Development DAY 2

iOS Swift x Layout x Animation x Transition 系列第 2 篇

技術 StackViewAnimation

手機豎直、橫平時的動畫效果。效果：當收起其中一張圖片的時候，其他圖片平均的去補滿空餘的位置。當一張圖片要回來的時候，回到原本的位置，並讓在畫面上的圖片...

陳董 Don ‧ 2017-12-21 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1652 瀏覽

鐵人賽 Software Development DAY 11

iOS Swift x Layout x Animation x Transition 系列第 11 篇

技術 Lineage M 卡包動畫 - Frame animation

最近和朋友們都在重溫「天堂」這個網路遊戲，雖然遊戲畫面依舊沿用了過去的風格，但實際上玩起來已經完全不一樣了。就像其他手遊一樣，融入了卡片、自動行動等功能，最...

陳董 Don ‧ 2017-12-30 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1629 瀏覽

鐵人賽 Modern Web DAY 7

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 7 篇

技術 Chapter2 - Canvas動畫（I）玩轉路徑和位移動畫原來這麼簡單

這個章節呢，同樣會以實作為主，在解決問題中帶大家學習，逐漸引入JS的語言特性，前面一樣會從簡單的開始，後面八成會開始越講越快，若有不明白的歡迎留言詢問! 路徑和...

jerrythepotato ‧ 2021-09-14

0 Like 0 留言 1626 瀏覽

鐵人賽 Software Development DAY 27

iOS Swift x Layout x Animation x Transition 系列第 27 篇

技術 LoadingAnimation - Triangle

LoadingAnimation 動畫為三個點不停的跑到下一個地點。 LoadingView LoadingView 會是一個正方形，在這個正方形裡面定義...

陳董 Don ‧ 2018-01-15 ‧團隊好想工作室第一屆鐵人賽

1 Like 0 留言 1610 瀏覽

鐵人賽 Software Development DAY 17

iOS Swift x Layout x Animation x Transition 系列第 17 篇

技術 BankCoins - 讓錢幣飛一會

快過年了，這次做一個一堆錢飛向存錢筒的動畫效果。 BankCoins 畫面正上方放著一個存錢筒，點下「Show me the money」以後，會有300個金...

陳董 Don ‧ 2018-01-05 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1549 瀏覽

鐵人賽 Software Development DAY 3

iOS Swift x Layout x Animation x Transition 系列第 3 篇

技術 DrawingAnimation + CustomLoadingView

通過 UIBezier 在 Layer 上畫一個 Chat 的圖案製作一個 Loading 畫面 DrawingAnimation + Custom...

陳董 Don ‧ 2017-12-22 ‧團隊好想工作室第一屆鐵人賽

1 Like 0 留言 1540 瀏覽

鐵人賽自我挑戰組 DAY 9

C# 碰 ECG，生醫能迸出什麼花火？系列第 9 篇

技術 ECG 的 Storyboard !?

沒查不知道，一查不得了！原來WPF還有動畫的 Namespace! using System.Windows.Media.Animation; 雖然這塊g...

Alan ‧ 2018-10-09

0 Like 0 留言 1537 瀏覽

鐵人賽 Software Development DAY 18

iOS Swift x Layout x Animation x Transition 系列第 18 篇

技術 3DCardLayout - 立體卡片佈局

這次做個橫向移動的卡片佈局。 3DCardLayout 如上面的動畫顯示，卡片可以左右滑動，當滑動經過 x 軸中央時，卡片會向左後方或者右後方凹折過去。...

陳董 Don ‧ 2018-01-06 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 1141 瀏覽

鐵人賽 Modern Web DAY 29

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 29 篇

技術 Chapter5 - 輕鬆用Canvas實現轉場動畫和運鏡處理

接下來時間真的很緊，也顧不上結構了，只能就目前想到的功能，先以直覺的方式編寫了，如果講不太清楚還多多包涵！昨天的一定要先看唷，今天是接著作下去的轉場玩家從進...

jerrythepotato ‧ 2021-10-06

0 Like 0 留言 1054 瀏覽

鐵人賽 Modern Web DAY 30

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 30 篇

技術 Chapter5 - 不介意的話，請玩玩看這個Canvas遊戲！試圖拾回一片片的落葉，拯救這顆樹吧

(10/11更)私下有一些朋友反應手機不太能玩，我才想起這個問題，所以有對此demo在長版進行微調，原文主要講解橫版(電腦端)的處理先給大家看看成果吧！h...

jerrythepotato ‧ 2021-10-07

1 Like 0 留言 1019 瀏覽

技術 [快速入門前端 34] 進階樣式屬性 (4)：Animation 動畫

Animation 動畫前面我們講完了 transition，這邊來講一個進階的概念 —— Animation (動畫)，在前面轉場效果中，主要是設定因事件觸...

Doris ‧ 2023-06-27

0 Like 0 留言 1019 瀏覽

鐵人賽 Mobile Development DAY 14

30天建立寵物約散App-Android新手篇系列第 14 篇

技術【day14】 Fab X 跳頁Animation

好的! 我們今天主要要來設定Fab，以及跳頁的動畫! 1.先在我們的DashboardFragment新增Fab 搜尋的方式有很多種，除了有fab之外，...

Tom ‧ 2021-09-29 ‧團隊好想工作室V5.0

0 Like 0 留言 993 瀏覽

鐵人賽 Modern Web DAY 26

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 26 篇

技術 Chapter5 - 當一個勤勞的園丁，來修剪我們美麗的樹（I）Canvas繪圖 Y型樹枝(愛心型) + 控制分支的變化

提醒：本篇承接第三章讓我們說回那顆樹既然樹是我們遊戲場景的主體之一，首先當然是要來整修一下我們的樹，此時我意外發現有個很讚的教學影片：Fractal T...

jerrythepotato ‧ 2021-10-03

0 Like 0 留言 942 瀏覽

鐵人賽 Mobile Development DAY 18

雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~ 系列第 18 篇

技術 [Day18] swift & kotlin 實作篇！(9) Animation -kotlin

kotlin kotlin 也一樣來讓小雞跳起來吧這邊也一樣有很多種動畫的寫法同swift來玩玩關鍵影格動畫吧首先來看看語法 ObjectAnimator...

Ami ‧ 2021-09-26 ‧團隊神龍特攻隊 - it 宏的逆襲

0 Like 0 留言 915 瀏覽

鐵人賽 Modern Web DAY 27

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 27 篇

技術 Chapter5 - 當一個勤勞的園丁，來修剪我們美麗的樹（II）Canvas素材修圖、壓縮、效能優化

樹葉問題先前在第三章畫樹時，就有發現把樹葉畫上去時，系統工作時間會增加而導致掉偵，原圖是300x300，50kb左右，不是很大，但是我們要畫一大堆落葉的話，計...

jerrythepotato ‧ 2021-10-04

0 Like 0 留言 894 瀏覽

鐵人賽自我挑戰組 DAY 22

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 22 篇

技術 Day 22：客製我要的動畫【Tailwind – Animation 篇】

上一篇我們講到了 transition，但 transition 只是簡單的給予簡易的動畫，實際上能調整的只有整體動畫秒數，但如果我們想要將動畫切分成關鍵影格的...

linlaose ‧ 2022-10-07 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 875 瀏覽

鐵人賽 Modern Web DAY 28

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 28 篇

技術 Chapter5 - 當一個勤勞的園丁，來修剪我們美麗的樹（III）Canvas動畫讓樹隨著讀取畫面長大

題外話補充昨天忘記下的結論：不管要繪製的圖案多大，都建議畫(儲存)在一個和原圖一樣大的canvas上，取代原本的圖案，當作未來的繪製來源。 let leafI...

jerrythepotato ‧ 2021-10-05

0 Like 0 留言 861 瀏覽

鐵人賽 Modern Web DAY 10

拾起 Canvas，人人都是大藝術家！系列第 10 篇

技術第 10 幅－動畫入門：嗨動畫，我們先認識一下吧！

其實，我們都曾是動畫師動畫其實就是一張張的影像，在非常短暫的時間內變化（例如每秒變換 16 張影像），近而產生視覺停留的效果。相信大家小時候都有畫過「翻頁動畫...

珊迪 ‧ 2022-09-25 ‧團隊斜槓排排隊

0 Like 0 留言 813 瀏覽

鐵人賽 Mobile Development DAY 17

雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~ 系列第 17 篇

技術 [Day17] swift & kotlin 實作篇！(8) Animation - swift

swift 畫面有了～功能也有了~ 接下來我們做個小動畫我們試著讓小雞在畫面中跳起來整個APP 感覺就活起來了關於動畫～swift也不少方法都可以跑動畫...

Ami ‧ 2021-09-25 ‧團隊神龍特攻隊 - it 宏的逆襲

0 Like 0 留言 804 瀏覽

鐵人賽 Modern Web DAY 8

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 8 篇

技術 Chapter2 - Canvas動畫（II）用國中數學拆解Ease-out和Ease-in

如何計算每一偵的位移首先我們改寫一下昨天的格式，還記得昨天我們用到的是這樣的寫法： cursorX+= distanceX / period; cursorY...

jerrythepotato ‧ 2021-09-15

0 Like 0 留言 794 瀏覽

鐵人賽 Modern Web DAY 9

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 9 篇

技術 Chapter2 - Canvas動畫（III）讓我們跳過微積分用輕鬆的方式畫落葉吧

接下來終於要談談，讓我們更輕鬆的物件了其實網路上有很多相關的文章，都可以帶你更深入JS時，但常常問題在於，他們的舉例都不夠實際，並不是說不好，而是「需求的問題...

jerrythepotato ‧ 2021-09-16

0 Like 0 留言 773 瀏覽

技術分享一段『油土伯』創意特效按鈕 by CSS

之前看到的一段視頻 ! 因為 css 的動畫特效不常接觸, 在此分享給廣大邦友 !影片中, youtuber 巧妙的利用 <span> 來完成按鈕邊...

Darwin Watterson ‧ 2019-09-03

0 Like 0 留言 758 瀏覽

鐵人賽 Modern Web DAY 24

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 24 篇

技術 Chapter4 附錄貝茲曲線

前言什麼是貝茲曲線？它能創造一連串平滑的曲線，被應用在PS和AI中的鋼筆、以及常見的CSS Animation，換句話說，你學會了貝茲曲線，就大概懂一半網頁動...

jerrythepotato ‧ 2021-10-01

0 Like 0 留言 735 瀏覽

鐵人賽 Modern Web DAY 21

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 21 篇

技術 Chapter4 - Canvas背景動畫（II）就如那輕薄的鴻毛，我心上小船載浮載沉

今天西子灣被斷網了，所以沒時間打太多字，請見諒，有看不懂的留言詢問哦!https://jerry-the-potato.github.io/Chapter4-d...

jerrythepotato ‧ 2021-09-28

0 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 14

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 14 篇

技術 Chapter3 - canvas動畫續篇加入Z軸也能使2D畫面產生立體的空間感

https://jerry-the-potato.github.io/ChapterX-demo/https://jerry-the-potato.github...

jerrythepotato ‧ 2021-09-21

0 Like 0 留言 703 瀏覽

鐵人賽 Modern Web DAY 25

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 25 篇

技術 Chapter5 終於要來從零打造－Canvas網頁遊戲－之行前說明書

前言其實我算蠻容易分心的，說好要搞流程圖，結果都在打code；說好要做遊戲，結果都在搞動畫；雖然列了大綱，中途還是更換了幾個主題，臨時起意去畫樹，不過，這樣的...

jerrythepotato ‧ 2021-10-02

1 Like 0 留言 645 瀏覽

鐵人賽 Mobile Development DAY 20

雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~ 系列第 20 篇

技術 [Day20] swift & kotlin 遊戲篇！(2) 小雞BB-遊戲製作-小雞排版

遊戲示意 swift 版本 kotlin 版本 swift - 改寫小雞動畫原本畫面是這樣下一步我們要將其他Label與UIButton都刪除只留下...

Ami ‧ 2021-09-28 ‧團隊神龍特攻隊 - it 宏的逆襲