Download to read offline
![[悲報] JSでアニメーションするにはCSSが必須](https://image.slidesharecdn.com/css-200111071635/85/CSS-39-320.jpg)
CSSから国民を守る党
- 1.
- 2. 自己紹介 • 名前 暁の流星 •Twitter @nomber1910 @1910akatsuki • GitHub Akatsuki1910 • 普段はプログラミング(主にJavaScript) • 最近HP制作中 • 英語わかんなすぎて同じ変数名ばっかなるのなんでなん
- 3. 注意事項 • JavaScriptをひいきした内容です • 決して戦争を起こすわけではないのであしからず •出てくる登場人物や名前は全てノンフィクションだったりします
- 4. 政党公約文(あらすじ) • CSSAnimationとかいうものが最近(設立当時)できたので、JavaScript(以 下JS)を愛する上級国民様方から守るというものです • JSにはcanvasタグというものがあり、ライブラリを使うことによってアニメー ションができる •CSSでできないような芸当をみせてJSの格の違いを見せつける CSSをぶっ壊す!!!
- 5. 党の設立理由 • 有名な人も自分の店を守るために 戦っていたから • Twitterことかす @NNPS_KM_SONYA
- 6.
- 7. JSアニメーションの味方PIXIJS • WebGLを簡単に使えるようにしたやつ • AdobeFlash の代わりになるもの • 2D • 軽い • すごい • 最近3Dにも浸食してるやべーやつ • https://www.pixijs.com/
- 8. JSのターン 実際に動いてるのを見ます var width =500; var height = 500; var stage = new PIXI.Container(); var renderer = PIXI.autoDetectRenderer(width, height,{ antialias: true, }); document.getElementById("pixiview").appendChild(renderer.view); var graphics = new PIXI.Graphics(); graphics.beginFill(0x66FF33); graphics.lineStyle(4, 0xffd900, 1); tri(0,0,100); graphics.endFill(); stage.addChild(graphics); graphics.position.x=200; graphics.position.y=200; !function main(){ requestAnimationFrame(main); graphics.rotation+=Math.PI/180; renderer.render(stage); }(); function tri(x,y,t){ h=t/2*Math.sqrt(3); graphics.moveTo(x,y-h/2); graphics.lineTo(x-t/2,y+h/2); graphics.lineTo(x+t/2,y+h/2); graphics.lineTo(x, y-h/2); }
- 9. JSのターン var width =500; var height = 500; var stage = new PIXI.Container(); var renderer = PIXI.autoDetectRenderer(width, height,{ antialias: true, }); document.getElementById("pixiview").appendChild(renderer.view); var graphics = new PIXI.Graphics(); graphics.beginFill(0x66FF33); graphics.lineStyle(4, 0xffd900, 1); tri(0,0,100); graphics.endFill(); stage.addChild(graphics); graphics.position.x=200; graphics.position.y=200; !function main(){ requestAnimationFrame(main); graphics.rotation+=Math.PI/180; renderer.render(stage); }(); function tri(x,y,t){ h=t/2*Math.sqrt(3); graphics.moveTo(x,y-h/2); graphics.lineTo(x-t/2,y+h/2); graphics.lineTo(x+t/2,y+h/2); graphics.lineTo(x, y-h/2); } (0,0)を中心にして三角形 を作成して座標をずらす JSではルートの計算ができ るので正三角形が簡単に 作れる すごい
- 10. CSSのターン .border { margin: 100px; width:0; height: 0; border-style: solid; border-width: 0 100px 173.2px 100px; border-color: transparent transparent #007bff transparent; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 実際に動いてるのを見ます
- 11. CSSのターン .border { margin: 100px; width:0; height: 0; border-style: solid; border-width: 0 100px 173.2px 100px; border-color: transparent transparent #007bff transparent; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 枠線の幅とかをいじって無 理やり三角形にする linear 一定のスピード Infinite 永遠に実行
- 12. CSSのターン .border { margin: 100px; width:0; height: 0; border-style: solid; border-width: 0 100px 173.2px 100px; border-color: transparent transparent #007bff transparent; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 三角形の高さが173.2px これは100×√3したもの いちいち計算しなければな らない めんどくさい←重要 ここ
- 13.
- 14.
- 15.
- 16.
- 17. JSアニメーションの味方THREEJS • WebGLを簡単に使えるようにしたやつ • 本格的に3D表現ができる •2Dもできる • 軽い • すごい • 日本語説明してるサイトもあるので楽 • https://threejs.org/
- 18.
- 19. JSのターン 実際に動いてるのを見ます var width =window.innerWidth; var height = window.innerHeight; var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('canvas') }); renderer.setSize(width, height); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.i nnerHeight, 1, 10000); camera.position.z = 500; scene.add(camera); var geometry = new THREE.CubeGeometry(200, 200, 200); var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); !function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render(scene, camera); }();
- 20. JSのターン 大きさを指定するだけなの ですごく楽 materialを変えるだけで色んな 種類の見た目に変えることがで きる var width =window.innerWidth; var height = window.innerHeight; var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('canvas') }); renderer.setSize(width, height); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.i nnerHeight, 1, 10000); camera.position.z = 500; scene.add(camera); var geometry = new THREE.CubeGeometry(200, 200, 200); var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); !function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render(scene, camera); }();
- 21.
- 22. とあるサイト MDN web docshttps://developer.mozilla.org/ja/docs/Web/CSS/transform-style
- 23.
- 24.
- 25. あ り まし た
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. CSSのターン • 2Dどころか3Dも実現可能 • もうすぐで数式が増える •SASSやSCSSを使えばできるものが増える • Ifやforといったアニメーションする時に便利なものがある • will-changeとかいったもので軽量化が可能
- 36. JSのターン <!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>pixijs</title> <script src="../jquery-3.3.1.min.js"></script> <script src="../pixi.min.js"></script> </head> <body> <div id="pixiview"></div> <script src="main.js"></script> </body> </html> htmlがキレイ 美しい divの奥行を変えれば手前に文 字ができるので、背景にも使え る すごい
- 37. JSのターン <!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>pixijs</title> <script src="../jquery-3.3.1.min.js"></script> <script src="../pixi.min.js"></script> </head> <body> <div id="pixiview"></div> <script src="main.js"></script> </body> </html> 実際に動いてるのを見ます
- 38.
- 39.
- 41.
- 42.
- 43.
- 44.
- 45.