노이즈 애니메이션을 원터치로 실현
좀비랜드 사가 공식 사이트(의 일부) 에서 노이즈 애니메이션이 사용되고 있는 것을 보고, 「이것은 라이브러리화할 수 있을 것 같다」라고 생각해, 충동적으로 만든 것이 이쪽입니다.
Noise Maker - 데모
Noise Maker - 리포지토리
노이즈 애니메이션 로직
좀비랜드 사가에서는 이런 이미지 을 별도로 준비하고 사용하고 있습니다만, 이것을 Canvas 로 동적으로 생성하는 것으로 편리성과 범용성을 높이기로 했습니다 (말투가 크게).
background-position를 무작위로 설정 NoiseMaker 클래스 정보
위의 로직을 기반으로 만든 것이 NoiseMaker 클래스입니다. 다음 특징.
아래 코드.
class NoiseMaker {
constructor () {
this.configs = {};
this.configId = 0;
setInterval(() => {
for (let key in this.configs) {
this.configs[key].target.style['background-position'] = `${this.irandom(0, this.configs[key].width)}px ${this.irandom(0, this.configs[key].height)}px`;
}
}, 1);
}
make (config) {
const canvas = document.createElement('canvas');
canvas.setAttribute('width', config.width);
canvas.setAttribute('height', config.height);
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
for (let y = 0; y < imageData.height; y ++) {
for (let x = 0; x < imageData.width; x ++) {
const index = (imageData.width * y + x) * 4;
imageData.data[index] = this.irandom(config.r[0], config.r[1]);
imageData.data[index + 1] = this.irandom(config.g[0], config.g[1]);
imageData.data[index + 2] = this.irandom(config.b[0], config.b[1]);
imageData.data[index + 3] = this.irandom(config.a[0], config.a[1]);
}
}
context.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
config.target.style['background-image'] = `url(${canvas.toDataURL()})`;
this.configs[this.configId.toString()] = config;
return this.configId ++;
}
remove (configId) {
this.configs[configId].target.style['background-image'] = null;
this.configs[configId].target.style['background-position'] = null;
delete this.configs[configId];
}
irandom (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
사용법.
// オブジェクトの作成
const noiseMaker = new NoiseMaker();
// ノイズアニメーションの作成
let configId = noiseMaker.make({
target: document.querySelector('.target'),
width: 320,
height: 320,
r: [ 0, 255 ],
g: [ 0, 255 ],
b: [ 0, 255 ],
a: [ 0, 255 ]
});
// ノイズアニメーションの削除
noiseMaker.remove(configId);
또한 데모에서는 두 곳에 다른 애니메이션을 설정하고 있습니다.
끝에
즉흥으로 썼기 때문에 여러가지 그렇습니다만, 대체로 이런 느낌으로 좋다고 생각합니다. α값을 낮게 억제하는 것이 요령군요. 그리고는 아이디어 나름으로.
Reference
이 문제에 관하여(노이즈 애니메이션을 원터치로 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mimonelu/items/67904c5841f7ceedc75c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
