iT邦幫忙

animation相關文章
共有 32 則文章

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

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

鐵人賽 自我挑戰組 DAY 17

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 15

技術 Day15 CSS 動畫 Animation - 基礎篇

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12
從積木開始學程式 系列 第 12

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

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

鐵人賽 自我挑戰組 DAY 12

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 自我挑戰組 DAY 9

技術 ECG 的 Storyboard !?

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

鐵人賽 Software Development DAY 30

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

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

鐵人賽 Software Development DAY 29

技術 LoadingAnimation - Walk

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

鐵人賽 Software Development DAY 28

技術 LoadingAnimation - Switch

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

鐵人賽 Modern Web DAY 27

技術 Day27:小事之 Transition 與 Animation

CSS3 中有兩個用來做動畫的屬性,一個是 Transition,另一個是 Animation 差異比較 CSS3 差異 Transition 在...

鐵人賽 Software Development DAY 27

技術 LoadingAnimation - Triangle

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

鐵人賽 Software Development DAY 26

技術 LoadingAnimation - 彈跳的三個點

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

鐵人賽 Software Development DAY 25

技術 Loading Animation - 模仿知乎加載畫面

繼續通過練習來提高做動畫的能力。 Loading Animation - 模仿知乎 Loading 畫面 在 iOS 版的「知乎」應用裡面,讀取畫面的時候...

鐵人賽 Software Development DAY 23

技術 Gradient Animation - 漸層動畫

通過 CAGradientLayer 可以很容易實現漸變色效果,而且這個漸變色的效果可以拿來做動畫。 Gradient Animation 一開始的背景圖...

鐵人賽 Software Development DAY 22

技術 Transitions - UIView Transition (視圖轉場動畫)

其實 iOS 原生有提供一些設計好的轉場動畫,比如簡單的翻轉效果,這次把原生的轉場效果都看一次。 Transitions 共有七種 UIView Tran...

鐵人賽 Software Development DAY 20

技術 Color Diffusion Transition - 色彩擴散轉場動畫

先從一個簡單的轉場動畫開始,了解自定義轉場動畫的過程。 Color Diffusion Transition 第一個畫面背景是綠色的,中間有個紅色的箱子,...

鐵人賽 Modern Web DAY 29
前端新手村 系列 第 29

技術 前端新手村 Animations (下)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 28
前端新手村 系列 第 28

技術 前端新手村 Animations (上)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Software Development DAY 18

技術 3DCardLayout - 立體卡片佈局

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

鐵人賽 Modern Web DAY 27
前端新手村 系列 第 27

技術 前端新手村 Animations (前傳)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Software Development DAY 17

技術 BankCoins - 讓錢幣飛一會

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

鐵人賽 Software Development DAY 11

技術 Lineage M 卡包動畫 - Frame animation

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

鐵人賽 Software Development DAY 5

技術 ImageSlider - 圖片轉換動畫

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

鐵人賽 Software Development DAY 4

技術 Expandable Buttons - 折疊式按鈕

在 Web 應用中,我們常常會看到畫面的右下角會提供一個按鈕,點下去後會展開更多的按鈕,用來提供一些功能(例如分享到 Facebook/Line/Weibo)...

鐵人賽 Software Development DAY 20

技術 Kotlin 開發第 20 天 ActivityTransition

和 iOS 開發一樣,Android 也有提供幾個內建的轉場動畫,如 Explode / Slide / Fade. 使用內建的轉場動畫 使用 Androi...

鐵人賽 Software Development DAY 3

技術 DrawingAnimation + CustomLoadingView

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

鐵人賽 Software Development DAY 2

技術 StackViewAnimation

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