The original:
Mp.weixin.qq.com/s/bTWajT3UI…

preface

In Web pages, smooth transition effects can increase the comfort of user experience and make user cognitive process more natural. At the same time, appropriate effects can also guide users to focus on important information. In the demand scene of large screen mode of WeGame, the author took this opportunity to communicate with students of visual and animation design in the early stage of development, set up the transition dynamic effect and realization mode of the product, and create an “immersive” atmosphere for users in the experience.




I. Suggestions for designing transition dynamic effects:

To design good transitions, consider the following aspects:

  • Integrity and consistency of dynamic effect: before designing dynamic effect transition, the effect of page frame and interactive element switching should be considered as a whole, such as the same page, sub-page, pop-up feedback and menu exhaling effect.
  • Dynamic effect time and slow curve:

    Time of dynamic effect: Google Material Design mentioned that, if the animation area is larger, the corresponding animation response speed should be faster. Since the author’s requirement scene is PC device interface, the animation duration should be controlled at about 0.3s.

    Dynamic curves: Natural slow curves affect the speed of elements and make your animations feel smoother. You can use the Cubic – Bezier animation tool to set the animation curve as you see fit.

Two, transition dynamic effect analysis:

In the animation effect presentation, we can divide into frame transition effect and element association effect:

  • Frame transition effect:There are several frame animations we use: gradient, slide, flip, zoom, overlay, and so on



    The above effects can be rendered individually, or multiple combinations of effects can be used to create more interesting transitions. We can quickly use CSS3 Transition and Animation style properties in Web page development. And we can define reusable Transition style and Animaton style files that can be used by other project Web pages.

  • Element association effect:The transition effect of element association is just like the magic movement effect in Keynote. Elements are always running through the switch before and after the page, allowing users to perceive the hierarchical relationship of element content.



    It is important to note that element association effects cannot be replicated for other projects and need to be considered for visual design scenarios.

Iii. Implementation scheme

On the Web side, if you need to land into a business project, how should it be implemented?

  • Native Web application implementation:There are tools like animsiwind.js that can execute animation when clicking to trigger a jump and listen for the animation to finish before jumping, but the page will still flash because the jump eventually occurs.




  • Vue Routing implementation:The Vue framework provides the transition effect of adding routing pages using tags during route switching. In the early stage of development, you can plan the structure of the route and define the page effect of switching.







    VUE implementation effect is as follows:



4. Experience optimization

Cool transition animation and special effects not only bring better user experience, but also bring high load of resource occupation. If effective measures are not taken, not only the expected effect can not be achieved, but the user experience will be affected.

We can optimize the animation experience from the following two aspects:

1. Improve the response speed of page loading. Data needs to be loaded after the page enters. When data is loaded slowly, the smooth switching sense of transition dynamic effect will be interrupted.

So if the page needs to load network data, what can we do to optimize or improve the page transition performance? It can be solved in the following three directions:

  • Reduce the network loading time, such as page straight out, lazy loading, local cache strategy and other technical solutions to try;
  • Use skeleton screen instead of content for transition, after the skeleton screen transition is completed, switch to the real page;
  • Use route switching instead of page skipping as far as possible to reduce page refresh;

In WeGame’s large screen mode, because the Web application is packaged locally, we can save data loading time when the page opens; Using the VUE technology stack for development, we can reduce the page global refresh and use routing for switching; Through practice we found that the transition effect of VUE routing can greatly meet the transition switching effect of the page;

2. Downgrade gracefully

There are two reasons that affect Web dynamic performance: browser environment and running device;

  • Browser environment: The rendering of motion effects depends on the user’s browser kernel. The more advanced the browser kernel, the more motion effects can be implemented, the better.
  • Running device: Dynamic effect occupies a large number of system resources (such as CPUS, Gpus, and memory) during running. When the resource usage exceeds a certain threshold, frame loss or delay may occur. The higher the device configuration is, the less the impact is.

Therefore, when you consider adding transition effect for your product, you need to use for different solutions, equipment and environment using different animation in the high-end equipment and environment with full animation, equipment and environment in the use of important animation, in the low distribution equipment and environment without the use of animation, which is graceful degradation.

  • For the browser environment: we can obtain the Navigator information of the browser kernel through JS, and carry out corresponding animation processing for different browsers and versions.
  • For running equipment: test the moving effect of different equipment in the compatibility laboratory, classify and summarize the test results, find the optimal dynamic effect of high, medium and low equipment, and then obtain the equipment information of users for comparison, and decide what level of dynamic effect to use according to the comparison results.
    • Run in the browser: IE kernel browser can be obtained through the ActiveXObject plug-in, but other browsers can not do anything, only through the unified processing of the way to weigh animation.
    • Running on other clients: You can obtain device information from the client and send the information to the Web through interfaces.

In WeGame large screen mode, the implementation effect of blurred background and background animation occupy a high CPU. After the test, we communicated with the native client, returned the hardware level interface of the user device, and tried to shield animation for users with low hardware performance to ensure the smoothness of UI.

Five, the conclusion

In fact, the transition dynamic effect is not limited to the application of sliding, zooming, displacement and other effects, but also can be combined with SVG shape deformation animation, video, etc. for page transition. The specific scheme to be used depends on the form and requirements of the product.