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

0 Like 0 留言 615 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Chapter4 用音樂做動畫結合前三章學習的內容，一口氣衝刺吧！

題外話昨天沒把樹葉畫上去，還是心癢癢的，所以動手簡單裝飾了一下這棵樹：https://jerry-the-potato.github.io/Chapter3-...

jerrythepotato ‧ 2021-09-26

0 Like 0 留言 940 瀏覽

鐵人賽 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 留言 808 瀏覽

鐵人賽 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 留言 710 瀏覽

鐵人賽 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 留言 602 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Chapter2 - 重構完了還是覺得物件很複雜嗎？直接上圖，就明白物件讓你更輕鬆

前言前天談到如何避免程式碼散落四處、維護困難，帶大家改寫了物件格式，過了兩天，我突然想到，當時花太多篇幅在解釋觀念和舉例子，結果沒有實際把程式碼秀給大家看，果...

jerrythepotato ‧ 2021-09-19

3 Like 1 留言 6400 瀏覽

鐵人賽 Modern Web DAY 4

這個網站也太嗨！30 個網頁動態提案系列第 5 篇

技術 #3-打字特效炫起來！(CSS Animation)

昨天的第三個按鈕動態提案：文章傳送門使用了CSS動態的動態的主菜——Animation。其實有很多特效，只要能夠拆解他的原理，就可以使用Animation達成...

Global Rachel ‧ 2021-09-19 ‧團隊寫 code 需要講幹話

1 Like 0 留言 4195 瀏覽

鐵人賽自我挑戰組 DAY 8

後端工程師與圖的修練系列第 8 篇

技術狀態流程圖與有限狀態機

狀態圖 (State Machine) ，是類似於本文章要介紹的主軸: 有限狀態機 (Finite-State Automation)，有限的意思是有限個數的狀...

Mac Taylor ‧ 2021-09-18

1 Like 0 留言 585 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Chapter2 - 用物件看真實世界（I）寫程式為什麼需要物件？如何簡化畫落葉的流程？

物件是什麼？為什麼需要它呢？讓我們接續上回完成昨天的演示後，也許有人會覺得，處理落葉動畫的流程很簡單，就是「讓落葉自然落下」然後「在畫布上繪製落葉」兩步驟而...

jerrythepotato ‧ 2021-09-17

0 Like 0 留言 789 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

jerrythepotato ‧ 2021-09-16

0 Like 0 留言 801 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

jerrythepotato ‧ 2021-09-15

0 Like 0 留言 1617 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

jerrythepotato ‧ 2021-09-14

0 Like 0 留言 2518 瀏覽

技術 CSS Animation 使 Mobile 網頁崩潰！? 效能優化篇(1) - 避免過長的背景圖～

崩潰的起因- 開發時期,我在網頁內放置了一段 CSS Animation的動畫,這個功能在電腦上執行一切正常,直到網頁被改成RWD版本,悲劇就發生了.....某...

Ami ‧ 2021-07-16

1 Like 0 留言 15907 瀏覽

鐵人賽 Modern Web DAY 26

從平面轉型成網頁設計的 UI/UX 設計師系列第 26 篇

技術【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學

by CSS Animations- Guide to Cubic Bezier Curves 關於 CSS Animation 的基本介紹與使用方法，筆者推薦...

GG ‧ 2020-10-11 ‧團隊想吃薑母鴨

1 Like 0 留言 2349 瀏覽

鐵人賽 Mobile Development DAY 26

Why Flutter why? 從表層到底層，從如何到為何。系列第 26 篇

技術 days[25] = "為什麼動畫需要Ticker？"

類似之前的為什麼build()在State裡？，這也是我剛開始學Flutter的時候，心裡曾經出現的小小疑問。如果你有在看這系列，應該會常常看到我使用Timer...

Joshua ‧ 2020-09-26

0 Like 0 留言 2870 瀏覽

鐵人賽自我挑戰組 DAY 16

WordPress 客製化從 0 開始系列第 16 篇

技術 Day 16 用 WordPress 為網站增加動畫效果：GSAP

大家好，我是 Eric。昨天介紹了在 WordPress 中加入 Animation on Scroll 的效果，並說明如何用 wp_enqueueu_scr...

Eric 桓桓 ‧ 2020-09-17

0 Like 0 留言 2486 瀏覽

鐵人賽自我挑戰組 DAY 15

WordPress 客製化從 0 開始系列第 15 篇

技術 Day 15 用 WordPress 製作隨視窗捲動的動畫 (animation on scroll)

大家好，我是 Eric。前兩天介紹了 JavaScript 的基本觀念，今天我們將嘗試透過 WordPress 引入 JavaScript 函式庫，製作出可以...

Eric 桓桓 ‧ 2020-09-16

0 Like 0 留言 3917 瀏覽

鐵人賽 Mobile Development DAY 8

諸神黃昏下的 iOS 工程師系列第 8 篇

技術 D8 - 抱歉我不是動畫師，是工程師

? 隕石小故事在開發中，常常會碰到一些動畫需求，希望吸引使用者的目光。但是，有時候會被要求實現一些超炫（無理？）的動畫效果 ?。如果要實現它，可能需要一段...

Jeremy Xue ‧ 2019-09-23 ‧團隊好想工作室 v3.0

1 Like 0 留言 2387 瀏覽

鐵人賽 Modern Web DAY 2

以前端角度探討遊戲化的資訊設計系列第 2 篇

技術 Day 02 - 讀取 sprite sheet

讀取 sprite sheet 並產生動畫，介紹兩種方法: css animation 與 canvas 這裡示範使用的 sprite sheet，是使用六角學...

Bu ‧ 2019-09-17

0 Like 0 留言 771 瀏覽

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

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

Darwin Watterson ‧ 2019-09-03

1 Like 0 留言 2694 瀏覽

鐵人賽自我挑戰組 DAY 17

前端之 " wow~原來是這樣啊 " 系列第 17 篇

技術 Day17 CSS 動畫 Animation 實作練習(下)

利用 Animation 製作美美的動畫吧上上篇我們介紹了 Animation 的相關設定，在上一篇也實作了字體模糊動畫效果，本篇來試試看經典的球球追隨運動吧...

Lai ‧ 2018-11-01 ‧團隊好想工作室第二屆鐵人賽

1 Like 0 留言 2936 瀏覽

鐵人賽自我挑戰組 DAY 16

前端之 " wow~原來是這樣啊 " 系列第 16 篇

技術 Day16 CSS 動畫 Animation 實作練習(上）

利用 Animation 製作美美的動畫吧上一篇我們介紹了 Animation 的相關設定，Animation 有多個屬性供設定，比起 Transitions...

Lai ‧ 2018-10-31 ‧團隊好想工作室第二屆鐵人賽

2 Like 0 留言 5606 瀏覽

鐵人賽自我挑戰組 DAY 15

前端之 " wow~原來是這樣啊 " 系列第 15 篇

技術 Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧！之前講解過 Transitions 的動畫效果，也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

Lai ‧ 2018-10-30 ‧團隊好想工作室第二屆鐵人賽

4 Like 2 留言 7188 瀏覽

鐵人賽 Modern Web DAY 13

用 Three.js 來當個創世神系列第 13 篇

技術用 Three.js 來當個創世神 (12)：專案實作#7 - Tween.js 動畫實作

遊戲中的苦力怕行走機制是當玩家進入它的警戒範圍後，苦力怕會追著玩家跑，今天就讓我們利用 Tween.js 來實做這個部分，目標是做到能讓苦力怕追蹤鏡頭移動及轉...

ckchuang ‧ 2018-10-28 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

0 Like 0 留言 2153 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

米茶加豆奶 ‧ 2018-10-27

0 Like 0 留言 2828 瀏覽

鐵人賽自我挑戰組 DAY 12

一天一蘋果，Bug 遠離我。系列第 12 篇

技術 Day 12: 讓你的 Cell 動起來吧！

在 Cell 顯示時加入動畫效果，讓畫面更生動吧！ UICollectinoViewCell Animation 前言：在我們讀取畫面的時候如果只有單純顯...

Jeremy Xue ‧ 2018-10-27 ‧團隊好想工作室第二屆鐵人賽

2 Like 0 留言 4521 瀏覽

鐵人賽 Modern Web DAY 12

用 Three.js 來當個創世神系列第 12 篇

技術用 Three.js 來當個創世神 (11)：專案實作#6 - 人物基本動畫

在昨天的移動點光源實作上，我們透過更改光源的位置來達到動畫的效果，今天讓我們深入動畫的操作並實際上透過讓苦力怕擺頭、走動、膨脹的動作來練習基本動畫。 P...

ckchuang ‧ 2018-10-27 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 1537 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 ECG 的 Storyboard !?

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

Alan ‧ 2018-10-09

1 Like 3 留言 11447 瀏覽

鐵人賽 Software Development DAY 30

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

技術 iOS Swift x Layout x Animation x Transition (Finished)

Swift Layout x Animation x Transition 2018 - IT 邦棒忙鐵人賽 - Blog BankBalance Blog...

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

0 Like 0 留言 6545 瀏覽

鐵人賽 Software Development DAY 29

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

技術 LoadingAnimation - Walk

LoadingAnimation Walk 最左邊的點從上方拋擲最右邊，然後整體向左移動，循環動畫。 Loading View 將點平均分布在一個水平面上...

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

0 Like 0 留言 3280 瀏覽

鐵人賽 Software Development DAY 28

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

技術 LoadingAnimation - Switch

LoadingAnimation - Switch 三個點的動畫，向右移動的時候從上面，向做移動的時候從下面。 LoadingView 三個點定義在 Loa...

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

技術 Chapter4 用音樂做動畫 結合前三章學習的內容，一口氣衝刺吧！