Pure JavaScript - Timed Animation - Consistent height? -

-

i have created script animates height of element in 500ms.

the timer works fine struggling make height increase consistently.

how animate height smoothly within time period? jumps @ moment.

i want replace following smarter:

self.startheight + 5

i imagine has speed , elapsed time?

https://jsfiddle.net/zrm7xena/1/

(function () {     'use strict';      var animator = {};      animator.endheight = 200; //the end height     animator.interval = null; //create variable hold our interval     animator.speed = 500; //500ms     animator.startheight = 0; //the start height      animator.animate = function (el) {         var self = this,             starttime = date.now(); //get start time          this.interval = setinterval(function () {             var elapsed = date.now() - starttime, //work out elapsed time                 maxheight = self.maxheight; //cache max height               //if elapsed time less speed (500ms)             if (elapsed < self.speed) {                 console.log('still in timeframe');                  //if client height less max height (200px)                 if (el.clientheight < self.endheight) {                     self.startheight = self.startheight + 5; //adjust height                     el.style.height = self.startheight + 'px'; //animate height                 }             } else {                 console.log('stop , clear interval');                 el.style.height = self.endheight + 'px';                 clearinterval(self.interval);             }         }, 16); //60fps     };      animator.animate(document.getelementbyid('box')); }());

thanks in advance!

carorus gave great answer below. have updated jsfiddle can see final code working:

https://jsfiddle.net/zrm7xena/8/

typhoon posted great link in relation browser fps:

how determine best "framerate" (setinterval delay) use in javascript animation loop?

i use request animation frame instead of setinterval:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

cheers all!

the harcoded 5 using height increment doesn't allow animation complete entire final height (200) in time setting (500ms), need calculate height increment based on final height, animation time , interval make consistent:

(function () { 'use strict';  var animator = {};  animator.endheight = 200; //the end height animator.interval = null; //create variable hold our interval animator.speed = 500; //500ms animator.startheight = 0; //the start height animator.interval = 16;  animator.animate = function (el) {     var self = this,     starttime = date.now(); //get start time     //calculating height variation     self.deltaheight = (animator.endheight / animator.speed) * animator.interval;     this.intervalid = setinterval(function () {         var elapsed = date.now() - starttime, //work out elapsed time             maxheight = self.maxheight; //cache max height           //if elapsed time less speed (500ms)         if (elapsed < self.speed) {             console.log('still in timeframe');              //if client height less max height (200px)             if (el.clientheight < self.endheight) {                 self.startheight = self.startheight + self.deltaheight; //adjust height                 el.style.height = self.startheight + 'px'; //animate height             }         } else {             console.log('stop , clear interval');             el.style.height = self.endheight + 'px';             clearinterval(self.intervalid);         }     },  animator.interval); //60fps };  animator.animate(document.getelementbyid('box')); }());

Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more