The Web is a prominent platform for behavioral experiments, for many reasons (relative simplicity, ubiquity, and accessibility, among others). Over the last few years, many behavioral and social ...scientists have conducted Internet-based experiments using standard web technologies, both in native JavaScript and using research-oriented frameworks. At the same time, vendors of widely used web browsers have been working hard to improve the performance of their software. However, the goals of browser vendors do not always coincide with behavioral researchers’ needs. Whereas vendors want high-performance browsers to respond almost instantly and to trade off accuracy for speed, researchers have the opposite trade-off goal, wanting their browser-based experiments to exactly match the experimental design and procedure. In this article, we review and test some of the best practices suggested by web-browser vendors, based on the features provided by new web standards, in order to optimize animations for browser-based behavioral experiments with high-resolution timing requirements. Using specialized hardware, we conducted four studies to determine the accuracy and precision of two different methods. The results using CSS animations in web browsers (Method 1) with GPU acceleration turned off showed biases that depend on the combination of browser and operating system. The results of tests on the latest versions of GPU-accelerated web browsers showed no frame loss in CSS animations. The same happened in many, but not all, of the tests conducted using
requestAnimationFrame
(Method 2) instead of CSS animations. Unbeknownst to many researchers, vendors of web browsers implement complex technologies that result in reduced quality of timing. Therefore, behavioral researchers interested in timing-dependent procedures should be cautious when developing browser-based experiments and should test the accuracy and precision of the whole experimental setup (web application, web browser, operating system, and hardware).
The development of web technologies has led to the availability of various multimedia content on the web. In addition to text, images, and videos, transitions, animations and interactivity are ...increasingly used. Transitions and animations present the content on the page in more interesting, attractive ways and can attract and retain users longer, improving the measurable parameters of page visits as well as the user experience. Animations on the web can be created in many ways. And if the animations are not executed well, they can slow down the page. The goal of this article is to compare the measurable parameters of animations created with different technologies. HTML, CSS, SVG, P5js, WebGL technologies and animations created with a 3D modeling tool were used. The article uses two different examples of animations created with different technologies and then tested on several devices.
This paper explores the concept of web animations with the motive to generate exportable video files using a browser. We explain the process underlying animations such as tweening and controlling ...individual states of an object's animation cycle. We can composite many animations to follow a single timeline and capture individual frames at periodic intervals. Such frames, when stitched together, form a video. We will also explain the integration of an audio layer than runs in synchronization with the animations for better perception.
Not only the seismic retrofitting but also the prevention measures of the indoor furniture overturning are important for the human damage reduction at the earthquake. Then, the vibration test was ...done in this study with three kinds of furniture and 11 kinds of overturning prevention apparatuses. Effectiveness of the overturning prevention apparatus was brought at the strong motion together with the experiment in the past. Moreover, the experiment animation is disclosed on WEB, and a diversified evaluation like easiness to install and the economy, etc. is done.
One of the major problems of teaching and research is how to make the students acquire the correct way of thinking and to explore the suited teaching method. In this paper, we study the teaching ...method of web animation program according to the existing courses and teaching problems, perfect the teaching content and highlight the gravity by carrying out the inverse way of thinking "from static to dynamic" to foster students, and develop the students' innovative way of thinking and the operating skills by applying "reverse demo". The aim of the transformation of methods and tools is to let them master this course systematically and then creatively carry out the design in web animation.
Sketch-n-Stretch lets novices quickly and easily create 2D animations. The system has a seamless two-layer drawing interface that supports cutouts using a whiteboard metaphor. Cutout animations serve ...as building blocks to help users construct sophisticated animations. While manipulating cutout animations, users can draw and write text to create effects-such as articulated figures, multiple motions, and image objects-that have been difficult with previous sketching approaches. An intuitive timeline interface employs visually integrated motion cues and supports several traditional animation effects. Novices positively evaluated Sketch-n-Stretch's effectiveness in creating object motions, compared to an existing sketching tool. They also used its advanced features to animate complete stories. This video demonstrates the Sketch-n-Stretch tool for making sketch-based animations.
PDF
