Tag:Animation

  • Vue component switching mode

    Time:2021-12-29

    1. V-IF & v-else and identifier flag html( < template > ): <div id=”app”> <input type=”button” value=”toggle” @click=”flag=!flag”> <my-com1 v-if=”flag”></my-com1> <my-com2 v-else=”flag”></my-com2> </div> js: export default { name: ‘name’, return data: { flag: true }, methods: {} } 2、:is < component: is = “component name” / > 3. Animate Toggle <template> <transition mode=”out-in”> <component :is=”comName”></component> […]

  • Fancy CSS text animation

    Time:2021-12-28

    There have been two previous articles on fonts about how to define fonts: Font family you should know Further exploration of Web font family This article will be combined with this article–CSS fantasy border animationSimilar, say somethingText effect, use different attribute Collocations to realize various text dynamic effects. Google Font When writing various demo, sometimes […]

  • Android animation

    Time:2021-12-28

    summary The essence of animation is to smooth the transition between the two states of the content, rather than switching directly.Example: /** *By constantly translating *To achieve animation effects */ float newTranslationX = 0; public void translationX(View view){ Runnable runnable = new Runnable() { @Override public void run() { //Every time you move 5 pixels […]

  • Some interesting CSS animations

    Time:2021-12-27

    *Foreword Time passed too quickly. The last update article was a year ago. Recently, I’ve been very busy in my three-dimensional life. Now I’m taking a break to write articles. Recently, there are many large screens, including many interesting CSS animations. Let’s record it. *Text 1. Drawer effect fade in Online codeApply clip path to […]

  • Fluent 134: SVGA animation of graphic animation episode

    Time:2021-12-24

    I tried it beforeFlareandLottieAnimation, the effect is very efficient; Try another idea for today’s dishesSVGAAnimation;SVGAIs a simultaneous compatibleiOS / Android / Flutter / WebAnimation format of multiple platforms; SVGA Basic introduction Let’s praise the dishes firstSVGAThe official website is very concise, and the main information is easy to find. At the same time, it looks […]

  • Front end interview daily 3 + 1 – day 783

    Time:2021-12-24

    Today’s knowledge points (June 7, 2021) – day 783 (I also want to write a question) [HTML] use canvas to draw the animation of elegant hair [CSS] write an animation of a fan [JS] write a long press Delete method at the mobile terminal [soft skills] do you know the back-end knowledge system? tell us […]

  • Front end must see | basic knowledge of 2D Gamification interaction

    Time:2021-12-23

    Introduction:Integrate the game thinking and game mechanism in the non game environment to guide user interaction and use Author: Amoy front-end team – Eva JS author – Ming Fei Codeday#7 Beijing station, please clickFree registration。 background Now more and more companies and apps begin to use Gamification to make products. The so-called Gamification refers to […]

  • 20000 star! A powerful and simple JS painting Library

    Time:2021-12-21

    From front-end Superman, author Rong Ding Introduction When we want to draw a basic simple shape on the canvas, using canvas won’t feel cumbersome. However, when any form of interaction is required on the canvas, drawing complex graphics and changing pictures in specific situations, it will become very difficult to use the native canvas API. […]

  • IOS view layout principles

    Time:2021-12-20

    Level first, then position: Another idea is to specify the zindex of the view func forUI(){ //Hierarchy is very important. It’s hard to change view.addSubs([ playingV, tShowD, contentHan, progressV, bottomBoard, panelG ]) if calData.isFromStd{ view.addSubs([editX_bt, progressChoosePop]) } layout_h() h.addSubs([rhsMostMenuBtn, downloadB]) if calData.isFromStd{ tShowD.addSubs([vertBar]) } view.addSubs([darkCurtain, donePop, lhsPopViewSpacing, rhsPopViewTimes, speedSelectIdxV]) v.addSubs([resultPop]) let topRhsWidget: (ConstraintMaker) -> Void […]

  • Detailed examples of animation in IOS swift

    Time:2021-12-19

    Detailed examples of animation in IOS swift General animation for uiview let view = UIView(frame: CGRectMake(10.0, 10.0, 100.0, 40.0)) self.view.addSubview(view) view.backgroundColor = UIColor.lightGrayColor() //Position change var frame = view.frame UIView.animateWithDuration(0.6, delay: 2.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in frame.origin.x = 200.0 view.frame = frame }) { (finished:Bool) -> Void in UIView.animateWithDuration(0.6) { () […]

  • Loading animation implemented by CSS3

    Time:2021-12-19

    Realization effect Implementation code <h1>developpaer</h1> <h3>JB51.net</h3> <div class=’loader loader1′> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div class=’loader loader2′> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> <div class=’loader loader3′> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div class=’loader loader4′> […]

  • Teach you how to build wheels with native JavaScript (3) — project upgrade & pit filling & component rewriting

    Time:2021-12-18

    Project Upgrading & pit filling explain After more than half a year (wrong, it should be a lifetime), I decided to restart this wheel building project for several reasons: The old project structure is too bloated There are big problems in some implementation ideas of component The packing method is troublesome So I rebuilt a […]