From b3abf3a119e46fe631dd2eaf148ab84a18b1f255 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <renaudeau.gaetan@gmail.com>
Date: Sat, 16 Jan 2016 15:35:41 +0100
Subject: [PATCH] migrate AnimatedHelloGL to use Animated value

---
 Examples/AdvancedEffects/src/Banner.js |  2 +-
 Examples/Simple/src/AnimatedHelloGL.js | 18 +++++++-----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js
index 8f41288..b442f6c 100644
--- a/Examples/AdvancedEffects/src/Banner.js
+++ b/Examples/AdvancedEffects/src/Banner.js
@@ -30,7 +30,7 @@ class Banner extends React.Component {
     return <Surface width={width} height={height} opaque={false}
       onLoad={() => console.log("Banner onLoad")}
       onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
-      <GL.Node shader={shaders.banner} uniforms={{ time: time }} />
+      <GL.Node shader={shaders.banner} uniforms={{ time }} />
     </Surface>;
   }
 }
diff --git a/Examples/Simple/src/AnimatedHelloGL.js b/Examples/Simple/src/AnimatedHelloGL.js
index c87b0d7..8bb2a52 100644
--- a/Examples/Simple/src/AnimatedHelloGL.js
+++ b/Examples/Simple/src/AnimatedHelloGL.js
@@ -1,6 +1,7 @@
 const React = require("react-native");
 const GL = require("gl-react");
 const {Surface} = require("gl-react-native");
+const {Animated} = React;
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -21,20 +22,15 @@ class HelloGL extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      value: 0
+      value: new Animated.Value(0)
     };
   }
   componentDidMount () {
-    const loop = time => {
-      this.raf = requestAnimationFrame(loop);
-      this.setState({
-        value: (1 + Math.cos(time / 1000)) / 2 // cycle between 0 and 1
-      });
-    };
-    this.raf = requestAnimationFrame(loop);
-  }
-  componentWillUnmount () {
-    cancelAnimationFrame(this.raf);
+    const loop = () => Animated.sequence([
+      Animated.timing(this.state.value, { toValue: 1, duration: 1000 }),
+      Animated.timing(this.state.value, { toValue: 0, duration: 1000 })
+    ]).start(loop);
+    loop();
   }
   render () {
     const { width, height } = this.props;
-- 
2.26.2