当前位置:主页 > 资料 >

Animated React Metaballs
栏目分类:资料   发布日期:2018-08-02   浏览次数:

导读:本文为去找网小编(www.7zhao.net)为您推荐的Animated React Metaballs,希望对您有所帮助,谢谢! react-metaballs: Animated Metaballs in React andd3 Some time ago I wrote about , describing their utility and outlining an

本文为去找网小编(www.7zhao.net)为您推荐的Animated React Metaballs,希望对您有所帮助,谢谢!

去找(www.7zhao.net欢迎您



react-metaballs: Animated Metaballs in React and d3

Some time ago I wrote about , describing their utility and outlining an algorithm to compute an SVG path given a set of circles. However, I did not include sample code or information on animation.

copyright www.7zhao.net

That’s where React Metaballs comes in. It’s a simple component built using React and d3. Below is an overview of the project, how to use it, and a bit on my attempts at animation.

去找(www.7zhao.net欢迎您

react-metaballs

You can find a , as well as the , and . 欢迎访问www.7zhao.net

Installation

npm install react-metaballs www.7zhao.net 

Usage

Once installed, the Metaballs component can be imported as follows

本文来自去找www.7zhao.net

import ReactMetaballs from 'react-metaballs' 本文来自去找www.7zhao.net 

Data is formatted as an array of objects containing three values: www.7zhao.net

const circles = [
  {
    cx: 200,
    cy: 100,
    r: 64
  }, // ...
]; 

copyright www.7zhao.net

cx — center on the x-axis

内容来自www.7zhao.net

cy — center on the y-axis

www.7zhao.net

r — radius copyright www.7zhao.net

The coordinates are relative to the whole, meaning a rectangle is constructed around all circles creating the SVG . It then constructs a single path element around all circles using .

内容来自www.7zhao.net

class App extends Component {
  render () {
    return (
      <Metaballs
        easement={d3.easeBackOut}
        circles={circles} />
    )
  }
} 内容来自www.7zhao.net 

The final output renders an svg element that scales with it’s contain as defined by the attribute. That’s the scalable in SVG, we’ve defined a vector that the browser knows how to scale up or down. 去找(www.7zhao.net欢迎您

Animation

If you’ve held a reference to the Metaballs element, there’s an updateCircles method that takes care of transitioning between two sets of data.

欢迎访问www.7zhao.net

For example, to transition between two states:

去找(www.7zhao.net欢迎您

this.metaballRef.current.updateCircles(newCircles) copyright www.7zhao.net 

The original transitions were written with one line in CSS, but this approach was abandoned because of compatibility issues.

内容来自www.7zhao.net

path {
    transition: d 300ms ease-in-out;
} copyright www.7zhao.net 

If only animation were this simple. This actually works in Google Chrome, but only :( For other, modern browsers there is the SVG animate element, but this too has . Other guides on suggest requestAnimationFrame , but this seemed to likely to cause issues and too difficult to manipulate animation properties like easing. 本文来自去找www.7zhao.net

Enter d3 (pun intended)! d3 comes with tons of options, and has supports animating the . By creating a component that encapsulates a path element, animating the d property was easy: 去找(www.7zhao.net欢迎您

componentWillReceiveProps(nextProps) {
    if (this.props.path !== nextProps.path) {
        let { duration, easement = d3.easeLinear } = this.props;
        this.path.transition()
                 .ease(easement)
                 .attr('d', nextProps.path)
                 .on('end', () => this.setState({
                     path: nextProps.path
                 }))
                 .duration(duration);
    }
} 欢迎访问www.7zhao.net 

For the purists, this violates all the rules . From a d3 perspective, we’re not really binding to data just using d3 as a tweening library. From a React perspective, we’re manipulating the DOM directly and using the soon-to-be-deprecated method. But there certainly are others using in this way, and with great results.

www.7zhao.net

That’s it for now. I hope to explore in the future, which promises to wed React + d3 in a manner consistent with both frameworks. Credit to Varun Vachhar for his code and article on the mathematics of .

欢迎访问www.7zhao.net

You can find source code on . For ideas on styling and use cases, see my previous article on .

本文来自去找www.7zhao.net

欢迎访问www.7zhao.net


本文原文地址:https://itnext.io/animated-react-metaballs-dff3b3a6dee2?gi=3856829dd70e

以上为Animated React Metaballs文章的全部内容,若您也有好的文章,欢迎与我们分享! www.7zhao.net

Copyright ©2008-2017去找网版权所有   皖ICP备12002049号-2 皖公网安备 34088102000435号   关于我们|联系我们| 免责声明|友情链接|网站地图|手机版