2018年7月10日 星期二

TweenMax 教學- Special properties

Easing
在 TweenMax 還可以延伸做更進階的動畫效果,他們在 easing 這類設計了一些還不錯的效果,用法是類似這樣:
ease:Bounce.easeOut

要看各種 ease 效果可以參考官網的產生器,選擇一個喜歡的 easing 效果就好了。


簡單範例如下:




Callbacks
可以再以下各階段執行 callback
  • onComplete: 動畫完成時
  • onStart: 動畫開始時
  • onUpdate: 動畫更新時
  • onRepeat: 動畫重複時
  • onReverseComplete: 動畫倒轉完成時

  1. TweenMax.to("#logo", 1, {x:100, onComplete:tweenComplete, onCompleteParams:["done!"]});   
  2.   
  3. function tweenComplete(message) {   
  4.   console.log(message);   
  5. }  


參考官網範例如下:

See the Pen Callbacks and parameters by GreenSock (@GreenSock) on CodePen.




控制動畫
可以用以下方式控制動畫
  1. //create a reference to the animation   
  2. var tween = TweenMax.to("#logo", 1 {x:100});   
  3.   
  4. //pause   
  5. tween.pause();   
  6.   
  7. //resume (honors direction - reversed or not)   
  8. tween.resume();   
  9.   
  10. //reverse (always goes back towards the beginning)   
  11. tween.reverse();   
  12.   
  13. //jump to exactly 0.5 seconds into the tween   
  14. tween.seek(0.5);   
  15.   
  16. //jump to exacty 1/4th into the tween's progress:   
  17. tween.progress(0.25);   
  18.   
  19. //make the tween go half-speed   
  20. tween.timeScale(0.5);   
  21.   
  22. //make the tween go double-speed   
  23. tween.timeScale(2);   
  24.   
  25. //immediately kill the tween and make it eligible for garbage collection   
  26. tween.kill();  


See the Pen NMrBbE by GreenSock (@GreenSock) on CodePen.




Read more

2018年7月9日 星期一

GSAP 的 TweenMax 基礎教學

GSAP(GreenSock Animation Platform)是一個老牌的動畫服務,以往用在 flash 上,後來在 js 也都可以拿來使用,最近也滿多人把這隻應用在專案上,所以這邊也來介紹一下。


照文件的說明這隻在 DOM, SVG 和 canvas 都可以使用,使用的方法也是先下載或是透過 cdn 連結就可以開始使用了。

cdn 連結網址: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js


用法是 TweenMax.to(),裡面包含三個要素:
TweenMax.to(選擇器, 時間(單位: 秒), {屬性});


基本的應用如下:



裡面的屬性結合了 CSS3 的屬性,可以讓我們少寫很多 CSS3 的屬性,對應如下表:

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: 50 transform: translateX(50%)
yPercent: 50 transform: translateY(50%)





使用 TweenMax.from() 則可以讓動畫從設定的地方回到原本的地方




使用 fromTo 設定前後的樣式



Read more

2018年7月7日 星期六

[Pokemon Go] 超夢開圖以及歷來神獸心得

IMG_6284
IMG_6290

從台灣可以玩的第一天就開始玩的 Pokemon Go,在經歷了神獸開打半年左右的最近才終於收到超夢券,以前超夢道館開打的時候沒有券的看不到樣子,這回終於看到了。

IMG_6295
IMG_6296
IMG_6297
IMG_6299
IMG_6300
IMG_6303
IMG_6304

超夢感覺比蓋歐卡好打,蓋歐卡大概是歷來最難打的,打完後天氣很冷手很凍,第一球還太緊張沒丟到,還好調整後終於在第三球抓到開圖。
Read more

2018年7月6日 星期五

[jQuery plugin] Bootstrap 4 的 Tag input



Bootstrap 應該是現在很多人做網站都會用到的 UI Framework,在第四版之後有些舊版的 plugin UI 支援上可能有問題,這個 tag input 的功能應該也是不少想做內容型的網站的朋友需要用到的,就跟大家分享一下支援 Bootstrap 4 的 Tag input。


外掛網址: Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js


下載後將 css 和 js 掛上去就好了。
  1. <link href="tagsinput.css" rel="stylesheet" type="text/css">  
  2. <script src="tagsinput.js"></script>  

直接使用
  1. $(".taginput").tagsinput();  

option:
Read more

2018年7月4日 星期三

2018年7月3日 星期二

2018年6月29日 星期五

2018年6月28日 星期四

2018年6月27日 星期三

2018年6月26日 星期二

2018年6月25日 星期一

2018年6月24日 星期日

2018年6月22日 星期五

2018年6月21日 星期四

2018年6月20日 星期三

2018年6月19日 星期二

2018年6月18日 星期一

2018年6月17日 星期日

CSS3 動畫,hover 離開後動畫回播

用 CSS3 做動畫,比較簡單的 transition 的話當我們是使用 :hover 觸發的話,會在我們離開後自動回轉回去,但用 animation 的話則無法,所以如果我們想要做比較複雜的動畫的話,
就必須要再寫一個回播的的動畫才可以,簡單的如下:



在 hover 跟原始的屬性上各自加上不同播放方向的動畫就好了,但可能會有個缺點是一開始進來的時候動畫先播一次,這個也可以用一些技術上的方式解決。
Read more

2018年6月16日 星期六

2018年6月15日 星期五

2018年6月14日 星期四

2018年6月13日 星期三

2018年6月12日 星期二

2018年6月11日 星期一

2018年6月10日 星期日

[Pokémon-Info] UI 調整與其他型態寶可夢資訊



花了點時間把同一隻寶可夢如果有其他形態的資料加上去,比如噴火龍的超進化型態或是代歐奇希斯的各種型態,另外也在 UI 上做了一點調整,希望大家用起來更順手。

目前資料建到第三世代,其他寶可夢資料與遊戲資料也會陸續新增上去,也歡迎大家給我在製作上的建議喔。


Read more

2018年6月9日 星期六

2018年6月8日 星期五

2018年6月7日 星期四

2018年6月6日 星期三

[DeTools] 台灣制島等級地圖



因為網友說沒有綠島、蘭嶼那些小島,所以又做了一個台灣制島等級地圖,只要點一點就可以就算你在台灣各島之間的分數喔!

不過由於小島很多,所以這個地圖主要只有比較大的島,而像澎湖、金門和馬祖這種的群島也歸在一個,這個難度就比台灣那個困難多了吧。

如果對我製作的小工具有任何意見和建議也歡迎提出喔。
Read more

2018年6月5日 星期二

2018年6月4日 星期一

HTML 轉圖片- html2canvas



想要把 html 直接轉成圖片下載,這個 html2canvas 的 plugin 非常有用,以往需要 jQuery,現在也改成不用也可以執行了,使用方法很簡單,裝好 plugin 後用官網的方式就可以產生截圖。

  1. html2canvas(document.querySelector("#capture")).then(canvas => {   
  2.     document.body.appendChild(canvas)   
  3. });  

簡單講就是要指定要產生截圖的 id,這樣可以很方便的選擇 html 上的區塊產生圖片,其中 canvas 就是產生時的圖片,可以直接把他 append 到 html 上,或是使用以下方法直接下載。

  1. $("#auto").attr('href', canvas.toDataURL("image/png"));   
  2. $("#auto").attr('download','download.png');   
  3. lnk = document.getElementById("auto");   
  4. lnk.click();  

這邊是建一個 a,隱藏並設定 id=auto ,在使用 html5 新增的 download 屬性直接將產生的圖檔透過虛擬點擊的方式下載下來。

參考: jQuery 網頁特定區塊的截圖外掛 html2canvas
Read more

2018年6月3日 星期日

html5 a 的 download 屬性

html5 在 <a> 新增了一個 download 屬性,以往下載一個檔案可以簡單的用 a 加上連結,瀏覽器會幫你開啟一個新的頁籤下載,在 html5 加了這個屬性之後,就可以直接把檔案下載下來不用在另開頁籤了。

若在 download 加上屬性的値就可以設定下載的檔名,可以不用設定副檔名,只是要注意這個屬性跨網域(包含子網域)就無法作用了。
Read more

[DeTools] 台灣制縣地圖

講制縣有點怪,總之是最近日本那個旅遊的成就地圖又被大家廣泛討論,所以我也做了一個台灣版的,覺得地圖在這方面的應用以後應該還大有可為,也歡迎大家一起來玩及分享,並提供我在製作上的意見喔。

台灣制縣地圖產生器

分類的方式跟日本一樣,但其實台灣比較想其實評分標準是可以調整的,不過就先這樣大家來玩看看計算自己的分數吧。

Read more

CSS 的穿透屬性- pointer-events

這屬性最近用到覺得很方便,主要是當 html 上有兩個東西疊在一起時,hover 到上面那個後,下面的就無法偵測到 hover 事件。



當我們把上面那一個 div 修改屬性為 pointer-events:none 時,下面的就可以 hover 了。


這個屬性給 svg 可以玩得更多,完整的屬性說明如這篇文章介紹:

auto
pointer-events 未指定時的預設屬性,對於SVG内容,該值与visiblePainted效果相同
none
元素永遠不會成為滑鼠事件的target。但是,當其後代元素的pointer-events屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情况下,滑鼠事件將在捕獲或冒泡階段觸發父元素的事件真聽器。

visiblePainted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標:


visibility屬性值為visible,且滑鼠游標在元素内部,且fill屬性指定了none之外的值
visibility屬性值為visible,滑鼠游標在元素邊界上,且stroke屬性指定了none之外的值

visibleFill
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素内部時,元素才會成為滑鼠事件的目標,fill屬性的值不影響事件處理。
visibleStroke
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素邊界時,元素才會成為滑鼠事件的目標,stroke屬性的值不影響事件處理。
visible
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標,fill和stroke屬性的值不影響事件處理。
painted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標:


滑鼠游標在元素内部,且fill屬性指定了none之外的值
滑鼠游標在元素邊界上,且stroke屬性指定了none之外的值

visibility屬性的值不影響事件處理。
fill
只適用於SVG。只有滑鼠游標在元素内部时,元素才會成為滑鼠事件的目標,fill和visibility屬性的值不影響事件處理。
stroke
只適用於SVG。只有滑鼠游標在元素邊界上時,元素才會成為滑鼠事件的目標,stroke和visibility屬性的值不影響事件處理。
all
只適用於SVG。只有滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標,fill、stroke和visibility屬性的值不影響事件處理。



最近有用在台灣制縣地圖上,就不會因為文字疊在圖片上點不到了。

Read more

2018年6月2日 星期六

[SVG] 繪圖

矩形使用 rect

可以設定的屬性有:

x: 起始點 x 軸的座標
y: 起始點 y 軸的座標
width: 矩形的寬度
height: 矩形的高度
rx: 圓角的 x 軸半徑
ry: 圓角的 y 軸半徑
transform: 矩形的變形效果

style 可以設定的值有

fill: 圖形內部的填滿顏色
fill-opacity: 圖形內部的不透明度值
stroke: 圖形的邊框顏色
stroke-width: 圖形的邊框寬度
opacity: 圖形的不透明度值
Read more

[SVG] 矩形基本繪圖

svg 有以下幾種基本的繪圖標籤:
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

要繪製的時候先要用 svg 的標籤,再依想繪製的形狀使用繪製的標籤。


其中 rect 是基本矩形標籤,可以設定寬高
style 內是 css 定義樣式,
fill 設定背景色
stroke-width 設定邊框粗細
stroke 設定邊框顏色

所以我們也可以改成用 css 控制屬性



此外我們還可以用設定形狀的位置還有透明度等


x, y 用來設定離左上角的位置,透明度分為 fill-opacity 跟 stroke-opacity,個別設定填色和邊框的透明度。


加上 rx 及 ry 可以設定矩形的圓角。

Read more

[SVG] 簡介

這幾年來因為製作網頁時需要兼顧到在各載具都能很適當的呈現內容,除了大家常聽到的 RWD(響應式網頁設計)外,圖片也都是一個時常需要處理到的議題,我們可以使用 css 的 media query 或 html 的 picture 標籤在各個解析度範圍內設定要顯示的圖片外,另外像 icon 或 logo 這種相對比較單純的圖形,則可以使用向量圖讓圖片不管如何縮放都不會失真,加上又只需要準備一個檔案,相對起來輕鬆又愉快。

以下為制服地圖網站的 logo 圖片,即以 svg 格式儲存。


現在許多網站也都把 logo 改成 svg 的圖片,筆者本人有在講授前端相關的課程,學生們結訓後也不少跟我反應他們工作後也都會把公司的 logo 改成 svg 的格式,而要製作 svg 也很簡單,只要會使用 illustrator 繪圖,在存檔的時候將格式設定為 .svg,就可以 svg 以 img 標籤嵌入網頁,或直接將原始碼嵌入網頁可進一步設定及操作。
Read more

2018年6月1日 星期五

2018年5月31日 星期四

用 CSS 製作半透明背景圖片



CSS3 之後雖然有 opacity 的屬性很方便,可是如果想要製作半透明背景,是沒辦法直接把背景圖片設成半透明的,如果有這個需求的話,只要善用 css 的 position 屬性跟 :after 去設定就可以了。

Read more

2018年5月29日 星期二

2018年5月28日 星期一

2018 由你瘋 Uniform 制服大賞

2018 制服大賞

今年的制服大賞跟以往不一樣,有教育部支持,並定名為 2018 由你瘋 Uniform 制服大賞,活動也區分為攝影比賽、第二校服設計比賽與校服文創商品設計比賽,歡迎大家投稿參加喔,得獎的將會在教育部記者會頒獎並有獎金,詳情請看活動官網說明

2018 制服大賞

2018 制服大賞
Read more

Spotlights- 關注網路事件的資訊集合網站

spotlight

Spotlights 是一個整理及集合網路上發生的熱門議題的網站,其實完成一段時間了,UI 上因為網站名稱的關係,特意做成滑鼠移動的時候會有一道光,移到各個貼文時那一則會發亮。

可以從貼文的 tag 關注每一個新聞事件網友的創作,在開始製作這個網站的時候,也是希望在 fb 演算法運作下,每個人所看到的東西會越來越狹隘,而透過這樣的資料收集,就可以更完整的看到網路上各個面向的創作。

spotlight-article

Read more

2018年5月26日 星期六

機械哥吉拉 3式機龍三式機龍 初號機配色

機械哥吉拉x初號機三式機龍(2002式)

這台是福音戰士與哥吉拉聯名的套件,使用 2002 年版《哥吉拉vs機械哥吉拉》裡機械哥吉拉的造型配上 EVA 初號機的配色推出的模型。


機械哥吉拉x初號機三式機龍(2002式)

多少有在關注這台,但覺得價位不友善才沒有入手,只是最近剛好看到有人以算低價在出售,就忍不住買了。

機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)

買回來才發現這台幾乎沒有可動性,造型雖然還可以但真的膠感太重,還好是買二手的入手,不然應該要很有愛的人才會覺得值得吧..


機械哥吉拉x初號機三式機龍(2002式)


機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)


寂寞的背影。
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)


因為家裡攝影棚不夠大所以帶出去外面拍。
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)
機械哥吉拉x初號機三式機龍(2002式)


最後劇透一下《一級玩家》。
機械哥吉拉x初號機三式機龍(2002式)

RoboInfo 上的介紹

Read more

[超級英雄圖譜] 星火(Starfire)

Starfire

柯莉安妲(Koriand’r)初次登場於《DC漫畫禮物》(DC Comics Presents)第26期(1980年10月),由馬芙·沃夫曼(Marv Wolfman)和喬治·佩雷斯(George Pérez )創造。

柯莉安妲來自位於織女星系的塔馬蘭星(Tamaran),是那個星球的公主。曾參與超級英雄團隊,諸如少年泰坦(Teen Titans)、局外人(Outsiders)、正義聯盟(Justice League)、反抗者(R.E.B.E.L.S.)、法外者(Outlaws)。

星火柯莉安妲是塔馬蘭星的公主,塔馬蘭星的居民特徵為橙色皮膚,吸收太陽能轉化為超能力。

星火很愛玩,她是一名有吸引力的女性,也是一名天生的戰士。她曾有作為奴隸的痛苦過去,可是有著純潔心靈的她願意保護自己珍視的一切。

星火愛過夜翼迪克·格雷森(Dick Grason)以及紅箭羅伊·哈珀(Roy Harper),也與紅頭罩傑森·托德(Jason Todd)有過感情。
Read more

2018年5月25日 星期五

2018年5月23日 星期三

2018年5月22日 星期二

2018年5月21日 星期一

2018年5月20日 星期日

[NXEDGE STYLE] ファントムガンダム

P1022489

出自於機動戰士海盜鋼彈 GHOST(機動戦士クロスボーン・ガンダム ゴースト)的機體 ファントムガンダム(Phantom Gundam),本來覺得可能等他模型化遙遙無期,沒想到連 HG 或 R 魂這種正常比例都還沒有出,就直接出在 NXEDGE STYLE 上。

P1022469
P1022470

這台是主角的機體,不同於大多數的鋼彈作品,主角是個電腦宅加上靠自己寫的 AI 才能上戰場戰鬥,不過配上逆天的機體還是能在戰場上大殺四方。

P1022471
P1022472
P1022473

機動戰士海盜鋼彈 GHOST 的故事跨到 V 鋼彈的時代,所以裡面的敵人也是桑斯卡爾帝國的人,這台機體其實也有 V2 的影子。

P1022474
P1022475
P1022476
P1022477

大出力狀態,比 V2 的光之翼噴的東西還多。

P1022478

臉跟 F91 系的鋼彈一樣會有鬼臉。

P1022479
P1022480
P1022481

武器有小刀。

P1022484
P1022485
P1022486
P1022487

特效零件不少。

P1022488
P1022489

可動性跟造型都不錯,但特效零件有點多加上配上翅膀後太重,沒放在腳架上會重心不穩,不過反正這系列就是要放在腳架上玩的就是了。









Read more
Related Posts Plugin for WordPress, Blogger...