git Address :https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn

explain

The effect of this animation is that the height of multiple lines changes , It's written in two ways (css,svg) To achieve .

CSS Realization

  • Define the node of the line , You can use pseudo elements to implement .
  • Use CSS3 Of animation Attributes define animation styles for elements .
  • The delay time of animation defined by each element is not fixed .
@-webkit-keyframes slide{
0%{height:0;}
100%{height:50px;}
}
.m-box .line:nth-child(1){
-webkit-animation:slide 1.2s linear .5s infinite alternate;
}
.m-box .line:nth-child(3){
-webkit-animation:slide 1.2s linear .75s infinite alternate;
}

SVG Realization

Use animate Element to implement . The principle is the same , By changing the height of the elements .

  • x="20", By changing x Coordinate values to position animation elements .( The orange line here )
  • modify animate On the label begin Attribute value to define the delay time of element animation .
  • svg Animation can't be like CSS It's like animation , Define the effect of playing back the animation in turn . So animation is a bit stiff .
<svg width="300" height="300" version="1.2" xml:space="default">
<rect height="0" width="5" rx="2.5" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.5s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="10" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="20" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.75s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="30" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.25s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect height="0" width="5" rx="2.5" x="40" style="fill:#f60;">
<animate attributeName="height" attributeType="XML" from="0" to="50" begin="0.5s" dur="1.2s" calcMode="linear" repeatCount="indefinite" />
</rect>
</svg>

Conclusion

  • svg Animation doesn't have to define styles , Define the animation entirely by defining the attributes of the tag .
  • svg Animation cannot define the effect of playing animation in reverse in turn .

SVG Animation Practice chapter - More articles on analog volume effects

  1. SVG Animation Practice chapter - Volume change effect

    git Address :https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn explain The effect of this animation is multiple lines ...

  2. SVG Animation Practice chapter - Line animation out of thin air

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path explain This animation is line animation , It mainly uses ...

  3. SVG Animation Practice chapter - Letter switching

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/letter.change explain This page implements ...

  4. iOS Animation simulation volume vibrating bar

    Volume bar design sketch : Suppose to realize ? establish 3 individual layer. Play in order y Axis scaling animation utilize CAReplicatorLayer Realization 1. What is? CAReplicatorLayer? One that can replicate its own sub layers laye ...

  5. Use SVG Animation to achieve flexible page element effect

    Codrops Shared some to SVG Elements and the inspiration of elastic animation . The idea is to put a SVG Elements are integrated into a component , And then from one path to another . This effect can be applied to things like menus , Buttons or other elements , Make interaction more interesting , Look more original ...

  6. SVG Animation

    Animation principle SVG Animation , It is the change of the attribute value of an element with respect to time . As shown in the figure below , The starting value of an attribute value of an element (from) To the end value (to) In a period of time (duration) According to the time function (timing-function) meter ...

  7. recommend 8 Implementation SVG The animation JavaScript library

    SVG It's a resolution independent image ( Vector graphics ). That means it doesn't suffer any quality loss on any kind of screen . besides , You can let SVG Some animation effects are vivid . I recommend this article to you 8 Implementation SVG The animation JavaSc ...

  8. Walkway.js – Make simple with lines SVG Animation

    Walkway.js It is composed of lines and path elements SVG A simple way to animate images . Just create a new one based on the configuration object provided  Walkway  Instance is OK . This effect is especially suitable for those who advocate simple design style of the web page . at present , W ...

  9. Inspiration for you :30 It's a great SVG Animation display 【 Part 1 】

    Front end developers and designers generally use CSS To create HTML Element animation . However , because HTML In creating patterns , shape , And other limitations , They're turning naturally SVG, It provides more and more interesting capabilities . With the help of SVG, We have more ...

Random recommendation

  1. ansible Installation and use of automatic operation and maintenance tools

    Running environment centOS6.6 ansible ansible There are still many functions of , Bloggers only use it to batch deploy software and maintain functions on the cluster , Others don't do much research , This article will be added slowly if necessary . ansible characteristic Light weight ...

  2. PHP curl Simulated landing

    A better class : $cookie_file=tempnam("C:/users","tmp"); Generate to tmp Prefixed file . <?php define ( ...

  3. Plug in Web frame

    Reprint build high performance plug-in Web frame be based on MVC Plug in mode construction supports database cluster . Real time data synchronization . Data publishing and subscription Web Framework system . Here's the picture : 1. Based on plug-in development The advantage of using plug-in mode is that the system framework and business mode can be developed effectively ...

  4. Use IDEA Development

    IDEA In the use of IDEA Before , I am a eclipse Loyal users of . Whether it's initial learning java, Or later python/golang. eclipse Abundant plug-ins have satisfied most of my use , Until the younger martial brother strongly recommended the use of ...

  5. restart mysql Tips :The server quit without updating PID file The solution to the problem

    Today, because you need to turn on the event scheduler event_scheduler, So I modified mysql Configuration file for /etc/my.cnf Because there are more semicolons in the configuration , Causes the boot to fail all the time , As shown in the figure below : Then I searched the post on the Internet (MySQL Tips ...

  6. SQLServer: Can't generate SSPI Context (Cannot generate SSPI context)

    Server version :windows Server 2012 R2 Database version : SQLServer 2016 +sp1 SQL2016AlwaysOn to cluster around : Due to the restart of domain control , As a result, some subsequent servers can't parse DN ...

  7. Asp.Net Core Easy to learn - utilize Swagger Automatically generate interface documentation

    Preface The mainstream development mode in the current market , Almost uniform separation of front and rear ends , As a Server Developer , We have the obligation to provide each client with good development documents , To facilitate docking , Reduce communication time , Improve development efficiency : For developers , Write interface documentation ...

  8. QVector It's also implicit data sharing

    Behind the scenes, QString uses implicit sharing (copy-on-write) to reduce memory usage and to avoid ...

  9. How to submit and release wechat apps ? Post questions : Applets only support https visit

    http://www.jisuapp.cn/news/305.html Post questions :1. Applets only support https visit 2. To configure the service domain name

  10. recollect BFC、IFC、GFC、FFC

    View of , Consolidate the foundation from FC Start FC,Formatting Context, Format context , yes W3C CSS2.1 A concept in the specification , It defines a render area in the page , And there's a set of rendering rules , It determines its children ...