2019年8月31日 星期六

2019年8月30日 星期五

2019年8月28日 星期三

javascript 陣列條件搜尋: filter

我們要在 js 的一個陣列裡面去篩選我們想要的資料,可以使用 filter 的方式,首先我們先準備一個原始資料如下:

var people = [
  {
    name: 'Jason',
    school: '建國中學',
    age: 18
  },
  {
    name: 'Sarah',
    school: '北一女中',
    age: 24
  },
  {
    name: 'Tony',
    school: '成功高中',
    age: 32
  },
  {
    name: 'Susan',
    school: '松山高中',
    age: 16
  }
];

要過濾的話用法如下,我們這邊可以再過濾後生成一個新的 array:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
此函式為一個斷言,用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中,若為 false 則不保留。可傳入三個參數:

element
原陣列目前所迭代處理中的元素。

index(選擇)
原陣列目前所迭代處理中的元素之索引。

array(選擇)
呼叫 filter 方法的陣列。

thisArg(選擇)
執行 callback 回呼函式的 this 值。


要取得年齡大於 20 歲的話
var ageThan20 = people.filter(function(item, index, array){
  return item.age > 20;       // 取得大於 20 歲的
});
console.log(ageThan20); // Tony, Sarah

改成用 function
function isOrderThan(value) {
  return value.age >= 20;
}
var ageThan = people.filter(isOrderThan);

像這樣可以取得特定學校
var school = people.filter(function(item, index, array){
  return item.school == "成功高中"; 
});
console.log(school)

這個熟悉的話對於要再處理物件是很方便的事情。
Read more

[NXEDGE STYLE] EVA 13 號機

P1200588

NXEDGE STYLE 在福音戰士系列出的還滿多的,除了之前的零號一號二號外,13 號機也推出了,其他還有 6 號機跟舊劇場版 5 號機等。

P1200581P1200582

這隻出自《福音戰士新劇場版:Q》,看起來很像初號機但有些細節不大一樣,最大的差別就是有四隻手。

P1200583P1200584P1200585P1200586

原作是真嗣跟薰駕駛的,新劇場版後面的初號機衍生機設計上都有點像神的感覺了。



使用的武器其中有一個是這個兩把朗基努斯之槍。

P1200587P1200588P1200589P1200590
看起來很嚇人可是很難戰鬥的感覺。

P1200591P1200592P1200593P1200594P1200595

似乎明年就會是新劇場版最後一集了,不知道庵野秀明又會給我們什麼驚喜。

Read more

2019年8月27日 星期二

2019年8月26日 星期一

SVG 的遮色片- mask 基礎

在 svg 也能使用類似 photoshop 的遮色片的效果,遮色片簡單說就是可以依據你指定的圖片依據本身顏色的資訊,讓被遮的圖片會有半透明的效果,這邊來示範一下,這邊我們設定簡單的紅藍綠來當遮色片:

    
  

接下來像這樣把遮色片指定上去

    
  

結果如下,可以看得出來越深的顏色遮上去後透明度越低。

See the Pen
svg mask color
by deathhell (@deathhell)
on CodePen.




我們也可以用透明度來做遮色片:

See the Pen
svg mask
by deathhell (@deathhell)
on CodePen.


接著我們把遮色片套到圖片上,先指定 svg 的漸層來當 mask

       
       


接著把遮色片套到圖片上就完成了。


See the Pen
svg mask image
by deathhell (@deathhell)
on CodePen.

Read more

2019年8月25日 星期日

2019年8月23日 星期五

2019年8月19日 星期一

[三國創傑傳] 夏候惇トールギスⅢ(夏侯惇托爾吉斯Ⅲ)

P1200578

三國創傑傳魏國(區)的第三隻就是曹操的好兄弟夏侯惇托爾吉斯Ⅲ啦,這次用托爾吉斯Ⅲ大概是為了要用鋼彈 W 系然後又因為有 I, II, III所以可以來當兄弟,目前也確定托爾吉斯會是夏侯淵了,就不知道是否會有托爾吉斯II了。

P1200572P1200573P1200574

一眼就能看出原型是托爾吉斯Ⅲ,瞎了一隻眼的部分不明顯,而且這次很奇怪的是這次不管原本是不是鋼彈臉都要在下面有一個鋼彈臉,大概還是有鋼彈臉可以賣得比較好吧,這隻就是用一個透明的零件遮住,拿下來就是鋼彈臉了。

P1200575P1200576

武器就真的不大想吐槽了,因為背景的關係(?)所以任何現代化的武器都可以直接拿來用,夏侯惇的武器就是跟原本的托爾吉斯Ⅲ一樣沒有太明顯的變化。

P1200577

可動性也是可以接受的範圍,補色的部分就腳部跟腰部有些地方要塗成白色,還算好處理,黃色的零件也都塗成金色後再把貼紙貼上去就還不錯了。

P1200578P1200579P1200580

Read more

2019年8月18日 星期日

2019年8月17日 星期六

[三國創傑傳] 張郃アルトロンガンダム (張郃雙頭龍鋼彈)

P1200570

三國創傑傳第二隻完成的系列是以 W 鋼彈(EW版)裡的哪吒為原型的張郃雙頭龍鋼彈,這也是魏國的第二隻機體,設定上原本是山賊,後來變成曹操的部下,不過這次的三國創傑傳的劇情真的可以不用理他了。


P1200558P1200559

原型:XXXG-01S2 雙頭龍鋼彈(EW版)
武器:兩尾銳槍、無盡雙頭(肩甲)
擅長槍術,也能控制雙肩的盔甲來戰鬥


P1200560P1200561

這次的造型滿滿意的,顏色也跟原型一樣以綠色為主,肩上的龍爪一樣可以伸展但顏色就改成紫色了。

P1200562P1200563

透明的槍就沒有跟原本的配色一樣,雙槍的頭可以裝到肩上的龍頭上。

P1200564P1200565P1200566

可動性一樣普普通通,裙甲上有搭配透明配件,但肩上的紫色就必須自己處理了,我這邊是使用有亮點的紫色油漆筆塗裝,覺得效果還不錯,裙甲後半部也是一樣的方式處理。

P1200567P1200568

龍頭伸出來就有點尷尬,看照片好像可以往前但我怎樣就沒辦法擺成這樣,可以往前的話應該就能更有魄力。

P1200569P1200570P1200571

這隻我也很滿意,現在也看到地獄死神的情報圖出來了,真希望五小強都能夠在這次實體化啊。
Read more

2019年8月16日 星期五

CSS 3 動畫- animation

CSS3 Animations

css 3 的動畫在網頁上執行起來很順,現在我在做動畫也都會以 css3 的 animation 為主,要互動的話再加上 js 就好了,基本用法是用一個 @keyframes 開始,這邊用法跟 function 很像,要替 keyframes 取一個名字如下:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

最簡單的就是 from 到 to,{}內就是要改變的 css 屬性,只要是可以漸變的屬性套進去,css就會把他變成動畫了。

除了 from 到 to 外,還可以設定 %,這樣動畫就會有更多變化,如:
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

接下來我們要再選擇器上指定要使用這個動畫,最基本的就是指定動畫的名稱跟時間
animation: example 2s;

實際執行結果

See the Pen
css animation
by deathhell (@deathhell)
on CodePen.



比較完整的設定有這些屬性
animation-duration:
動畫執行時間,單位可為 s(秒),這樣動畫就會根據你設定的時間在每個百分比的階段變化



animation-delay:
延遲時間,以 s 為單位

animation-iteration-count:
播放次數,可為數字或是 infinite(無限播放)

animation-direction: 播放方向,有以下參數可以設定
normal: 從 0%播到100%
reverse: 從 100%播到0%
alternate: 播放兩次以上,奇數次從0%到100%,偶數次從100%到0%
alternate-reverse: 跟 alternate 相反


animation-fill-mode:
當動畫停止時顯示的狀態
forwards: 停在最後的狀態
backwards: 停在最初的狀態
both: 視 animation-direction 決定狀態


animation-timing-function:
時間函數,預設為 ease,如果設為 linear 則從頭到尾變化一樣,可以使用的值有
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)
其中 steps 可以用來作 sprite 動畫
而 cubic-bezier 可以用來自動時間函式,由於數字太抽象,我們可以使用產生器幫我們調整時間函式並產出

animation-play-state:
動畫執行狀態,使用 paused 就會暫停,running 則為執行動畫


可以分開設定,也可以併在一起像這樣:
animation: name 5s linear 2s infinite alternate;

其中除了時間第一個是執行時間,第二個是 delay 時間外,其他的值沒有順序問題。

也可以一次執行很多個動畫如下:
name 5s linear, name2 5s ease
Read more
Related Posts Plugin for WordPress, Blogger...