JS/CSS ANIMACIJOS

Apie mane

  • Ovidijus Reipšlėger
  • Laisvai samdomas web programuotojas / sprendimų ieškotojas
  • Startuolio EasyKET įkūrėjas
  • Programuotoju dirbantis noriusvetaines.lt

Kam tų webo interakcijų ar animacijų?

Adobe Statistika

 Given 15 minutes to consume content, two-thirds of people would rather read something beautifully designed than something plain.

38% of people will stop engaging with a website if the content/layout is unattractive.

 39% of people will stop engaging with a website if images won’t load or take too long to load.

Apibendrinant

  • Interaktyvi / animuota svetainė labiau patraukia vartotojo akį, didina konversiją
  • Įterpus tam tikrus transitionus prie ilgai besikraunančios info galima lengviau išlaikyti vartotojo dėmesį bei neversti ieškoti kitų sprendimų
  • SEO, google lengviau nuskaito animuotas svetaines su js kurių html kontento dar nėra 

Truputėlis istorijos

Viena iš pirmųjų kompiuterio animacijų

Internetas

Be animacijų :(

Text

Text

Text

GIF atsiradimas

interneto renesansas

Subtitle

GIF Privalumai / trūkumai

  • Puikus palaikymas
  • Lengva įterpti
  • Palaiko permatomumą

Privalumai

  • Daug užimantys failai
  • Visa animacija yra tik tam tikroje vietoje
  • Ribota spalvų paletė

Trūkumai

FLASH

vs

DEMO 1

DEMO 2

MEANWHILE JAVASCRIPT

Privalumai

  • Vektorinės grafikos
  • Žymiai greičiau veikiančios 2d grafikos lyginant su senu js
  • 3D grafikos (primityvios)
  • Lengviau prieinamas dizaineriams (Adobe flash) 

Trūkumai:

  • Didelis baterijos suvartojimas
  • Pažeidžiama virusų (0 day exploitų)
  • Dažnai crashina (priklauso nuo dev)
  • Nepalaikomas mobilių platformų (buvo palaikomas android)

Į naršykles atėjo du draugai

CSS ANIMATION

Suteikia galimybę kurti animacijas iš daugumos html elementų nenaudojant js ar flasho

Kaip susikurti css animaciją

  • Apsirašyti @keyframe
  • Css selectoriuje parašyti keyframe pavadinimą 
  • Apsirašyti divą kuriame bus animacija

Pagrindinės css komandos

  • animation-name
  • animation-duration
  • animation timing-fucntion
    • linear,ease-in,cubic-bezier(x,x,x,x)
  • animation-delay
  • animation-iteration-count
  • animation-direction:

 

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

Galima apsirašyti viena eilute

Keyframes

@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 110px;}
    100% {top: 139px;}
}

arba

@keyframes mymove {
    from{
        top:0;
    }
    to{
        top:139px;
    }
}

Css animation libai

 

Css animation "makeris"

 

 

Css clip makeris

 

 

Animacijos toolsas linijoms

Canvas

Canvas yra html elementas skirtas piešti grafikoms su javascriptu

DEMO

Drawing api

Pagrindinės canvas komandos


  • lineTo(x,y)

  • stroke()

  • moveTo(x,y)

  • arc(x,y, radius, startAngle, endAngle [prieš laikorodžio rodyklę])

  • clearRect(x,y,width,height)

  • fillRect(x,y,width,height)

  • save()

Canvas frameworkai

 

Paper.js

Three JS

canvas ant steroidų

Scenos sukūrimas

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

3 Svarbiausi elementai

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Sukuriamas kubas

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

Animuojamas kubas

var render = function () {
				requestAnimationFrame( render );

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer.render(scene, camera);
			};

Apibendrinant

everything is fine

KLAUSIMAI? NE?


AČIŪ UŽ DĖMESĮ

Turite ką gero papasakot apie css/js ar tuo užsiimat?

parašykite

info@ovi.lt