Getting started with video can be a little intimidating, especially when you hear so many technical-sounding terms, like frame rate or fps. After all, there are multiple factors to take into account when choosing a frame rate. Not to worry! Remember those cool little flipbooks where a pad of paper had an image on every page, and when you flipped through the pages quickly, the image would appear to animate and move? This is how video works. Whether digital or old-school film, video is a series of still images that, when viewed in order at a certain speed, give the appearance of motion.
So if a video is captured and played back at 24fps, that means each second of video shows 24 distinct still images.
Frame rate greatly impacts the style and viewing experience of a video. Different frame rates yield different viewing experiences, and choosing a frame rate often means thinking about multiple factors, such as how realistic you want your video to look or whether or not you plan to use techniques like slow motion or motion-blur effects. For example, Hollywood-style movies are usually displayed at 24fps, since this frame rate is similar to how we see the world and creates a very cinematic look.
A higher frame rate keeps the motion smooth and the details crisp. On the other hand, people who create animated GIFs will often sacrifice detail for a smaller file size and choose a low frame rate.
Controversy aside, here are four things you need to keep in mind when choosing a frame rate. The frame rate of a video greatly impacts the look and feel of a video, which in turn determines how realistic the video appears.
This concept ties directly to how we naturally see the world. When we see motion, such as a person throwing a ball or a car driving by, we naturally see a certain amount of motion blur. Click the frame button to expand the frame panel next to the canvas.
Scroll to browse these frames in a row. The action buttons are located on top. Select a frame and click the "repeat" button to repeat the frame. You can find other action buttons next to the repeat button. You can select and repeat multiple frames in the frame viewer. Enter the frame viewer and get in the selection mode. Select multiple frames and click the "repeat" button. It's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems.
If you want to play along, the demo website is here. It looks like this:. There are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
Leaving the "Use margin" option set, start the animation, open the Performance tool, and make a recording. You'll only need to record a few seconds. Open up the first recording. Exactly what you'll see depends a lot on your machine and system load, but it will be something like this:. This is showing three distinct views: a an overview of the Waterfall, b the frame rate, and c the timeline details.
This is showing a compressed view of the Waterfall. The predominance of green is telling us that we're spending a lot of time painting. This is showing frame rate. Average frame rate here is Worse, though, is that the frame rate is very jagged, with lots of dips into the twenties and teens. It's unlikely you'll see a smooth animation here, especially when you add in user interaction.
The rest of the recording shows the Waterfall view. If you scroll through this, you'll see a pattern like this:. This is showing us the rendering waterfall. In each animation frame, we recalculate styles for every element, then perform a single layout, then a repaint.
You can see that paint especially is hurting performance here. In the screenshot above we've highlighted a paint operation, and the box on the right tells us it took With only You can experiment with this: try removing the box shadow using the Page Inspector , and see how that affects paint time.
But next, we'll see how using transform instead of margin eliminates those expensive paints entirely. Now switch the radio button in the web page to "Use transform", and make a new recording.
0コメント