React動畫

ThinkSNS 發布于2019-08-20 18:29 / 363人閱讀

摘要：一實現動畫通過讓界面迅速發生變化但動畫的哲學告訴我們變化要慢得用一個逐漸變化的過程來過渡從而幫助用戶理解頁面界面的變化可以分為節點或組件的增與減以及節點或屬性的變化其中提供的能夠幫助我們便捷的識別出增加或刪除的組件從而讓我們能夠專注于更加簡

一.React實現動畫

1.React通過setState讓界面迅速發生變化,但動畫的哲學告訴我們,變化要慢,得用一個逐漸變化的過程來過渡,從而幫助用戶理解頁面.
界面的變化可以分為DOM節點(或組件)的增與減以及DOM節點(或屬性)的變化.
其中React提供的ReactCSSTransition能夠幫助我們便捷的識別出增加或刪除的組件,
從而讓我們能夠專注于更加簡單的屬性變化的動畫.
2.這里統一將緩動函數通過js實現的動畫稱作js動畫,緩動函數由css提供的動畫稱作css動畫.
3.ReactCSSTransition插件就是利用CSS的Transition和animation來實現組件的出場和入場動畫.

二.CSS3 transition

1.css3過渡是元素從一種樣式逐漸改變為另一種的效果.

.ani2 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    transition: width 1s, transform 1s;
    animation: myfirst 3s infinite;
    &:hover {
        width: 200px;
        transform: rotate(360deg);
    }
}

三.css3 animation

1.@keyframes用于創建動畫,然后捆綁到某個選擇器.

@keyframes myfirst {
    0% {
        background: #f00;
    }
    50% {
        background: #0f0;
    }
    100% {
        background: #ccc;
    }
}

.ani2 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    transition: width 1s, transform 1s;
    animation: myfirst 3s infinite;
    &:hover {
        width: 200px;
        transform: rotate(360deg);
    }
}

四.react-addons-css-transition-group插件

1.react-addons-transition-group插件,就是在transition和animation兩個css屬性上實現的.
2.ReactCSSTransition工作原理
當組件出現時,會在組件添加transitionName-appear,然后下一時刻會給組件添加transitionName-appear-active類,
當組件進場時,給組件添加transitionName-enter類,然后下一時刻會給組件添加transitionName-enter-active類;
當組件出場時,會給組件添加transitionName-leave類,然后下一時刻給組件添加transitionName-leave-active類,
我們則可以在css文件中,通過設置transition,設置我們需要執行的動畫.
一般情況下,我們主要使用后兩種,并且,只有當組件的出場動畫完全執行完以后,組件才會被移除.
2.ReactCSSTransitionGroup組件參數
ReactCSSTransitionGroup其實就是一個組件,他規定了特定的參數,我們通過設置這些特定的參數,將這些參數反應到被其包裹的子組件中.
transitionName:設置動態生成類的自定義前綴.
component:字符串,設置ReactCSSTransition生成包裹子組件的標簽,默認時span,我們可以通過這個參數自定義,如div,li
transitionEnter:布爾值,設置是否使用出場動畫,默認時true.
transitionEnterTimeout:數值,設置入場動畫的執行時間,需要在css中和這里同時設置,否則會提示警告.
transitionLeave:布爾值,設置是否使用出場動畫,默認時true.
transitionLeaveTimeout:數值,設置出場動畫的執行時間,需要在css中和這里同時設置,否則會提示警告.
3.使用步驟
1.引包

var ReactCSSTransitionGroup = require("react-addons-css-transition-group");

2.將ReactCSSTransition組件添加到render中
ReactCSSTransitionGroup組件需要添加到已經掛載到頁面上的dom元素中.

淡入淡出實例

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: ["1111", "2222", "3333", "4444"]
        };
    }
    handleAdd = () => {
        var newItems = this.state.items.concat([prompt("enter some text")]);
        this.setState({
            items: newItems
        });
    }
    handleRemove = (i) => {
        var newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({
            items: newItems
        });
    }
    render() {
        return (
            
                
                
                    {
                        this.state.items.map((item, i) => {
                            return (
                                
                                    { item }
                                
                            )
                        })
                    }
                
            
        );
    }
}

.example-enter {
    opacity: 0.01;
}
.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}
.example-leave {
    opacity: 1;
}
.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}

輪播圖實例

class ImageCarousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: [
                "https://s1.sonkwo.com/FhXx9C5gqykP4UUJHPKfpS1cexVP",
                "http://7fvk4m.com1.z0.glb.clouddn.com/Fjn9lT9RdzW1dpIJ_7vSrxB4UKNB",
                "http://7fvk4m.com1.z0.glb.clouddn.com/FsDTCVnB9DYkWF-m0p7zNdVfadTg"
            ],
            current: 0
        };
    }
    componentDidMount() {
        setInterval(() => {
            let current = this.state.current;
            current++;
            if (current > this.state.a.length - 1) {
                current = 0;
            }
            this.setState({
                current
            });
        }, 5000);
    }
    render() {
        let { a, current } = this.state;

        return (
            
                
                    
                
            
        );
    }
}

.react-slide {
    li {
        width: 440px;
        height: 260px;
        overflow: hidden;
    }

    .carousel-enter {
        opacity: 0.01;
    }
    .carousel-enter.carousel-enter-active {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
    .carousel-leave {
        opacity: 1;
    }
    .carousel-leave.carousel-leave-active {
        opacity: 0.01;
        transition: opacity 1s ease-in-out;
    } 
}

GPU云服務器云服務器 react _React React 源碼 react cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84593.html

讓React應用“動”起來

摘要：因為其組件只是根據提供的及屬性，生成動畫的數據，業務應用中拿到生成的數據后根據需要添加需要動畫的組件樣式。除了上述簡單的動畫應用，在復雜動畫的實現方面，表現非常優越。 WEB應用中動畫很重要不管是web應用還是原生應用，也不論是PC端應用還是移動端應用，動畫都扮演了一個重要的角色。盡管動畫并不會添加應用的實際動能，但一個好的動畫，一個流暢且優雅，選擇在恰當時機出現的動畫，能為應用增...

xiyang 2019-08-22 16:47 評論0 收藏0
React Web 動畫的 5 種創建方式，每一種都不簡單

摘要：以前一直投入在中，寫動畫的時候不是用中的，就是依賴像這樣的庫，最近轉向，在得到很多大佬關于動畫的回應，于是決定分享給大家，如有其他見解，非常歡迎在下面評論中交流以下便是本文要分享的創建動畫的幾種方式下面，勒次個特斯大特一特給元素添加是最簡單以前一直投入在 React Native 中，寫動畫的時候不是用 CSS 中的 transitions / animations，就是依賴像 Gr...

solocoder 2019-08-21 11:54 評論0 收藏0
React動畫實現原理

摘要：動畫的實現原理要實現動畫，究其根本，最終的落地依然是操作從而達到頁面呈現動畫的目的。聲明：當前為草稿階段。然后有人可以指引下怎么寫草稿文章么~ web動畫的實現原理 web動畫的實現，最終都是需要操作dom。CSS動畫，是給相應的dom元素添加動畫className ; JS動畫，則是通過定時器或其他手段，不斷更改dom元素屬性值，達到動畫的目的。 React動畫的實現原理 Re...

mrli2016 2019-08-22 17:03 評論0 收藏0
探究 React Native 中 Props 驅動的 SVG 動畫和 Value 驅動動畫

摘要：再來看前端，前端的動畫實現，經過多年的發展，已分為動畫和動畫。此外還探究了驅動動畫在實現方法上的不同之處。驅動的動畫接下來看驅動的動畫。改造后的函數如下關鍵修改，強制刷新。對于，函數是可行的，然而對無效。引言一直以來，動畫都是移動開發中極為特殊的一塊。一方面，動畫在交互體驗上有著不可替代的優越處，然而另一方面，動畫的開發又極為的耗時，需要消耗工程師大量的時間用于開發和調試。再來看前...

Codeing_ls 2019-08-19 17:58 評論0 收藏0
React源碼剖析系列－玩轉 React Transition

摘要：后面將會仔細分析的源碼實現。更新完成后，對中的每個元素執行動畫的邏輯，對中的每個元素執行動畫的邏輯。事實上，原因很簡單，事件在某些情況是不會被觸發。總結動畫是組件初次后，才會被添加到的所有子元素上。參考資料官方文檔事件過去一年，React 給整個前端界帶來了一種新的開發方式，我們拋棄了無所不能的 DOM 操作。對于 React 實現動畫這個命題，DOM 操作已經是一條死路，而 CSS...

rottengeek 2019-08-19 17:13 評論0 收藏0
【譯】React Native 動畫 API 入門實例

摘要：簡而言之，它將對動畫中變化的屬性數值做插值運算并且刷新視圖。注意我們所建立的的是的一個實例。最后我們使用，表示這個組件是可動畫組件。一直不停動動畫序列的方法可以傳一個回調函數，在動畫全部執行完時觸發。翻譯自 React-native Animated API Basic Example 翻譯過程中有刪改簡介本文是探索 react-native 中實現的的 Animated AP...

qianfeng 2019-08-19 17:54 評論0 收藏0