Skip to content

Commit

Permalink
增加动画效果
Browse files Browse the repository at this point in the history
  • Loading branch information
CarGuoSmall committed May 29, 2018
1 parent 70101af commit 11a3a50
Show file tree
Hide file tree
Showing 8 changed files with 74 additions and 68 deletions.
5 changes: 3 additions & 2 deletions android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
compileSdkVersion 26
buildToolsVersion "26.0.2"

defaultConfig {
applicationId "com.gsygithubapp"
Expand Down Expand Up @@ -164,6 +164,7 @@ dependencies {
compile project(':react-native-i18n')
compile project(':react-native-image-crop-picker')
compile project(':realm')
compile project(':lottie-react-native')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
Expand Down
6 changes: 6 additions & 0 deletions android/app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">

<meta-data
android:name="android.max_aspect"
android:value="2.1" />

<meta-data android:name="android.notch_support" android:value="true"/>
<activity
android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
Expand Down
63 changes: 1 addition & 62 deletions android/app/src/main/java/com/gsygithubapp/MainApplication.java
Original file line number Diff line number Diff line change
@@ -1,62 +1 @@
package com.gsygithubapp;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.apsl.versionnumber.RNVersionNumberPackage;
import com.gsygithubapp.module.download.DownloadFilePackage;
import com.gsygithubapp.module.splash.SplashScreenReactPackage;
import com.gsygithubapp.views.webview.CustomWebViewPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.react.rnspinkit.RNSpinkitPackage;
import com.AlexanderZaytsev.RNI18n.RNI18nPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import io.realm.react.RealmReactPackage;
import com.reactnative.ivpusic.imagepicker.PickerPackage;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNVersionNumberPackage(),
new VectorIconsPackage(),
new RNSpinkitPackage(),
new RNI18nPackage(),
new CustomWebViewPackage(),
new DownloadFilePackage(),
new PickerPackage(),
new RealmReactPackage(),
new SplashScreenReactPackage()
);
}

@Override
protected String getJSMainModuleName() {
return "index";
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
package com.gsygithubapp;import android.app.Application;import com.facebook.react.ReactApplication;import com.apsl.versionnumber.RNVersionNumberPackage;import com.gsygithubapp.module.download.DownloadFilePackage;import com.gsygithubapp.module.splash.SplashScreenReactPackage;import com.gsygithubapp.views.webview.CustomWebViewPackage;import com.oblador.vectoricons.VectorIconsPackage;import com.react.rnspinkit.RNSpinkitPackage;import com.AlexanderZaytsev.RNI18n.RNI18nPackage;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import io.realm.react.RealmReactPackage;import com.reactnative.ivpusic.imagepicker.PickerPackage; import com.airbnb.android.react.lottie.LottiePackage;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new RNVersionNumberPackage(), new VectorIconsPackage(), new RNSpinkitPackage(), new RNI18nPackage(), new CustomWebViewPackage(), new DownloadFilePackage(), new PickerPackage(), new RealmReactPackage(), new SplashScreenReactPackage(), new LottiePackage() ); } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); }}
Expand Down
2 changes: 2 additions & 0 deletions android/settings.gradle
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
rootProject.name = 'GSYGithubAPP'
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
include ':react-native-image-crop-picker'
Expand Down
29 changes: 26 additions & 3 deletions app/components/WelcomePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import React, {Component} from 'react';
import {
View, Image, StatusBar, Platform
View, Image, StatusBar, Platform, Animated, Easing
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import styles, {screenHeight, screenWidth} from "../style"
Expand All @@ -15,6 +15,7 @@ import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as Constant from "../style/constant"
import SplashScreen from './widget/native/SplashNative'
import LottieView from 'lottie-react-native';

/**
* 欢迎页
Expand All @@ -24,21 +25,32 @@ class WelcomePage extends Component {
constructor(props) {
super(props);
this.toNext = this.toNext.bind(this);
this.state = {
progress: new Animated.Value(0),
};
}


componentDidMount() {
//处理白屏
if(Platform.OS === 'android') {
SplashScreen.hide();
}
//是否登陆,是否用户信息
userActions.initUserInfo().then((res) => {
this.toNext(res)
});
Animated.timing(this.state.progress, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
}).start();
}

componentWillUnmount() {

if (this.refs.lottieView) {
this.refs.lottieView.reset();
}
}

toNext(res) {
Expand All @@ -48,7 +60,7 @@ class WelcomePage extends Component {
} else {
Actions.reset("LoginPage");
}
}, 1000);
}, 2100);
}

render() {
Expand All @@ -59,6 +71,17 @@ class WelcomePage extends Component {
<Image source={require("../img/welcome.png")}
resizeMode={"contain"}
style={{width: screenWidth, height: screenHeight}}/>
<View style={[{justifyContent:'flex-end', alignItems: 'center', }, styles.absoluteFull]}>
<LottieView
ref="lottieView"
style={{
width: 150,
height: 150,
}}
source={require('../style/lottie/animation-w800-h800.json')}
progress={this.state.progress}
/>
</View>
</View>
</View>
)
Expand Down
1 change: 1 addition & 0 deletions app/style/lottie/animation-w800-h800.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"4.6.3","fr":29.9700012207031,"ip":0,"op":141.000005743048,"w":800,"h":800,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"center_circle","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[401,389,0]},"a":{"a":0,"k":[-13.063,-22.86,0]},"s":{"a":0,"k":[119.72,119.72,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[77.344,77.344]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.898039,0.223529,0.207843,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.141,0.161,0.18,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-14.328,-25.328],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":24,"s":[0,0],"e":[160,160]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":45,"s":[160,160],"e":[70,70]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":61,"s":[70,70],"e":[130,130]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":73,"s":[130,130],"e":[80,80]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":84,"s":[80,80],"e":[110,110]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":98,"s":[110,110],"e":[100,100]},{"t":116.000004724777}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"circle3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-120.543},"p":{"a":0,"k":[406,375,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p833_1_0p333_0"],"t":64,"s":[100],"e":[0]},{"t":110.000004480392}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0.333]},"n":["0p833_0p833_0p333_0p333"],"t":64,"s":[100],"e":[100]},{"t":110.000004480392}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.69],"y":[3.268]},"o":{"x":[0.294],"y":[0]},"n":["0p69_3p268_0p294_0"],"t":64,"s":[1886.781],"e":[1765.781]},{"t":115.000004684046}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.259,0.275,0.294,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.936]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p936_0p333_0"],"t":55,"s":[0],"e":[23.039]},{"i":{"x":[0.667],"y":[1.13]},"o":{"x":[0.333],"y":[-0.043]},"n":["0p667_1p13_0p333_-0p043"],"t":74,"s":[23.039],"e":[3]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.158]},"n":["0p667_1_0p333_0p158"],"t":85,"s":[3],"e":[24]},{"t":99.0000040323527}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-6.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"circle2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-59.94},"p":{"a":0,"k":[413,385,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":46,"s":[100],"e":[84.162]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[-0.084]},"n":["0p833_1_0p333_-0p084"],"t":73,"s":[84.162],"e":[100]},{"t":104.000004236007}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.324],"y":[0]},"n":["0p833_1_0p324_0"],"t":46,"s":[100],"e":[0]},{"t":104.000004236007}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.953]},"o":{"x":[0.327],"y":[0]},"n":["0p667_0p953_0p327_0"],"t":46,"s":[50],"e":[2101.915]},{"t":105.000004276738}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.141,0.161,0.18,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.91]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p91_0p333_0"],"t":60,"s":[0],"e":[13]},{"i":{"x":[0.667],"y":[1.258]},"o":{"x":[0.333],"y":[-0.085]},"n":["0p667_1p258_0p333_-0p085"],"t":75,"s":[13],"e":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.183]},"n":["0p667_1_0p333_0p183"],"t":87,"s":[2],"e":[24]},{"t":104.000004236007}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-7.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"circle1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[407,397,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":53,"s":[100],"e":[55.162]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0.01]},"n":["0p833_1_0p333_0p01"],"t":92,"s":[55.162],"e":[0]},{"t":105.000004276738}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0.333]},"n":["0p833_0p833_0p333_0p333"],"t":53,"s":[100],"e":[100]},{"t":103.000004195276}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_1_0p167_0p167"],"t":0,"s":[100],"e":[50]},{"i":{"x":[0.714],"y":[0.721]},"o":{"x":[0.303],"y":[0]},"n":["0p714_0p721_0p303_0"],"t":53,"s":[50],"e":[958.781]},{"t":104.000004236007}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.071,0.098,0.09,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.908]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p908_0p333_0"],"t":52,"s":[0],"e":[16.039]},{"i":{"x":[0.667],"y":[1.259]},"o":{"x":[0.333],"y":[-0.085]},"n":["0p667_1p259_0p333_-0p085"],"t":71,"s":[16.039],"e":[6]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.184]},"n":["0p667_1_0p333_0p184"],"t":82,"s":[6],"e":[24]},{"t":96.0000039101602}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-7.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1}]}
Loading

0 comments on commit 11a3a50

Please sign in to comment.