Today we are going to implement a time lapse animation effect. The current date is displayed at the beginning of the case. The user can select a date in the past from the date picker. The main component used is the trigger, the design idea is to convert the current date and the selected date into a timestamp format, and then through the trigger constantly change the value of the current date until equal to the selected date.
(A Unix timestamp is a representation of time, defined as the total number of milliseconds from 00 00 00 00 00 GMT on 01 01 1970 to the present.)
The following figure shows several variables used in the case. “Current date” is the current date stored in 2020-04-26 format, and the numerical variables “selected date” and “current date conversion timestamp” are the values of the corresponding date timestamp. In addition, in the case we can set the animation duration, so we need to add a numerical variable “speed”. That’s how much the trigger changes each time it fires.
When the case is initialized, we take the timestamp of the current time of the system, extract the year, month, and day to display, and save the timestamp value in the “current date conversion timestamp.”
Using the date picker in the extension component, we can select any day in the past and assign the timestamp of that date to the selected date.
When the input box is out of focus we calculate the value of “speed”, but the input speed is in seconds, and the trigger interval is 0.01 seconds, so the variable value of each trigger is (current date – selected date)/(input speed *100).
Click the play button “Go back”, it will first determine whether the content of the input box is empty. If so, it will give a hint, and if not, the trigger will start to play.
In the trigger event of the trigger, we first judge whether the timestamp of the current date is less than the selected date after subtracting the speed. If it is less than the selected date, then suspend the trigger and extract the year, month and day of the selected date to display, and the animation will end. If not, subtract the current date and time stamp from the speed, and then get the year, month, day display, so that the loop has a time backwards effect.
