JavaScript animatie beweging 1 mei 2016.

Slides:



Advertisements
Verwante presentaties
Bouw zelf een digitaal visitekaartje
Advertisements

Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Pieter Heyvaert.  Asteroiden ontwijken  Per ontweken asteroide +10 punten  Wanneer geraakt = Game Over.
KINN 2010 •OOP •O Object •O Georiënteerd •P Programmeren.
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
Spreekbeurt Animatiefilms
Informatica Flash beginners. Vereiste voorkennis: Geslaagd zijn voor de cursus Website Bouwen (Dreamweaver) beginners OF Beschikken over de volgende voorkennis:
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
Animaties maken met Monkeyjam
PERIODE 3: VISUAL FX Digitale Beeldbewerking – 2012/2013.
Robcad Hands On Workshop
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
VBA en VBS Een introductie.
VHDL Peter Slaets KHLim Functies en procedures Functies –type conversie functies »bit vector to integer en omgekeerd –verkorte componenten met maar 1 output.
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Functies als Getallen Jan Martin Jansen.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Wolter Kaper - AJAX en Javascript via Rails Deel 1 en 2.
PHP functies.
Rabobank Zoetermeer Sponsor v/h SeniorWeb Stichting Seniorweb Zoetermeer Cursus WEB!Pro.
Open Dag Informatica (28 nov 2003) 3D Graphics Workshop Dr. Erwin M. Bakker Ing. Ernst Lindoorn Leiden Institute of Advanced Computer Science Leiden University.
Blok 7: netwerken Les 3 Christian Bokhove.
Object georiënteerd programmeren in Alice
<HTML> <HEAD> <TITLE>Eerste script </TITLE>
KINN 2010 OOP O Object O Georiënteerd P Programmeren.
PHP & MYSQL LES 02 PHP & FORMULIEREN. PHP & MYSQL 01 PHP BASICS 02 PHP & FORMULIEREN 03 PHP & DATABASES 04 CMS: BEST PRACTICE.
De evolutie van JavaScript
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
Welkom bij Immersive space, de flashles Tijdens deze lessen, leren wij je werken met het programma adobe flash.
 De Loader Class wordt gebruikt om afbeeldingen (jpg, png, gifs) of swf’s tijdens het afspelen van het programma te laden. Ze staan dus niet in de Library.
HTML De basis-elementen.
JQuery CarouFredsel Gemaakt door Yannick. Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden.
De basis-elementen Deel 2
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
Java & het Web Programma: 3rd party libraries Standard actions (E)xpression (L)anguage.
Programma opdrachten methoden klasse variabelen en Geheugen objecten klasse zijn gegroepeerd in hebben als type veranderen bewerken.
Aangepaste timing nTheorie (16 colleges + 2 deeltentamens) nPraktijk (16 keer, 3 inleveropdrachten) college Tent. 1 Tent. 3 college prakt. 1 prakt. 3 prakt.
De werking van een schuifmaat
C++ Les 1: introductie. Programmeren Programma’s scripts Websites libraries (Sound, GUI, netwerking…)
Na de praktijk, de theorie.. Zoals een gehaktmolen 1.Je stopt er iets in. 2.Je hoeft niet te weten wat er binnenin gebeurt. 3.Het resultaat verschijnt.
IF() ELSE() LES 4: VOORWAARDEN. BOOL Een variabele die slechts 2 mogelijke waarden kan hebben: true(waar) of false(niet waar) duid je aan met bool bool.
De definitie van een object. Een object is een verzameling van eigenschappen en bewerkingen. Veel voorkomende objecten zijn: D (display) Gui (user interface)
Gebruik van e-health functies binnen Windoc
Hoofdstuk 2 Communicatie
Javascript.
Sjabloonsite Koen Van Cauwenberge.
Gameprogrammeren: Animatie
Javascript.
Menu - Affiliate Commissie
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Programmeren in de Klas
TIMER STARTEN DE TIJD IS OM! TIJDSLIMIET: 30 seconden
Game: omgaan met tijd (Jewel-Jam)
‘Inleiding objectgeoriënteerd programmeren met PHP’ ‘Inleiding’
Hoe maak je een pagina voor een website?
Digitale beeldverwerking
SQL Les February 2019.
SQL Les 3 23 February 2019.
ASP.NET MVC Web Development
SQL Les 7 24 February 2019.
Database connect formulieren 1 februari 2016.
Flow Approvals op verschillende manieren
SQL Les 9 12 May 2019.
SQL Les 4 12 May 2019.
Powershell & HTML.
HTML5 introductie.
Transcript van de presentatie:

JavaScript animatie beweging 1 mei 2016

Bakker 2016 1 februari 2016

<div onclick="move(this.children[0])" class="example_path"> <!DOCTYPE HTML> <html> <head> scene.add( skyBox ); href="/files/tutorial/browser/animation/animate.css"> <script> function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearInterval(id) } var id = setInterval(frame, 10) // draw every 10ms </script> </head> <body> <div onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Bakker 2016 1 februari 2016

Parameters beweging delay Tijd tussen frames (in ms, 1/1000 second). Bijvoorbeeld, 10ms duration De uitvoertijd per een animatie moet (in ms) bijvoorbeeld 1000ms start De starttijd van de animatie; start = new Date. timePassed De tijd die verlopen is vanaf de start van de animatie progress Voortgang in animatie tijd dat al gepasseerd is. Op een frame bepaald als timePassed/duration. Schaal is van 0 tot 1. Bijvoorbeeld progress = 0.5 betekent dat de halve duration gebruikt is. delta(progress) Een functie welke de huidige animatie progressie weergeeft. Bijvoorbeeld; De height property loopt van Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Parameters beweging Bakker 2016 1 februari 2016

Plotter Bakker 2016 1 februari 2016

Totaal lineair <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="animate.css"> <script> function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame // hier worden attributen aangepast if (left == 100) // check finish condition clearInterval(id) } var id = setInterval(frame, 10) // draw every 10ms </script> </head> <body> <div onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Bakker 2016 1 februari 2016

Totaal functies <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="animate.css"> <script src="animate.js"></script> <script src="move.js"></script> <script src="delta.js"></script> <script src="step.js"></script> </head> <body> <div onclick="move(this.children[0], linear)" class="example_path"> <div class="example_block">LIN</div>LINEAIR </div> <div onclick="move(this.children[0], bounce)" class="example_path"> <div class="example_block">BOTS</div>BOTS of BOUNCE <div onclick="move(this.children[0], elastic)" class="example_path"> <div class="example_block">ELASTIC</div>ELASTISCH <div onclick="move(this.children[0], quad)" class="example_path"> <div class="example_block">QUAD</div>EXPONENTIEEL of QUAD </body> </html> Totaal functies Bakker 2016 1 februari 2016

De bewegingen Bakker 2016 1 februari 2016

Animate.js Move.js Bakker 2016 1 februari 2016

delta.js Bakker 2016 1 februari 2016

step.js Bakker 2016 1 februari 2016