Kaynağa Gözat

[样式][新增]:动画效果

tags/jenkins-front-end-screenad-65^0
hupeng 6 yıl önce
ebeveyn
işleme
aec3707710
1 değiştirilmiş dosya ile 118 ekleme ve 104 silme
  1. +118
    -104
      App.js

+ 118
- 104
App.js Dosyayı Görüntüle

@@ -45,6 +45,8 @@ export default class MyPage extends Component {
contentItem2:contentItemDefault,
contentItem3:contentItemDefault,

contentDisplayStatus:true,

syncMessage: "INIT" ,
progress: {
receivedBytes:0,
@@ -134,6 +136,14 @@ componentDidMount() {
this.getBaseInfo()
this.getAdDataList()

setInterval(
()=>{
this.setState({ contentDisplayStatus: false})
this.setState({ contentDisplayStatus: true})
},
5000,
);
}


@@ -154,6 +164,113 @@ render() {
);
}

if (this.state.contentDisplayStatus) {
var content = (<View style={styles.content}>

<Animatable.View animation="slideInDown" style={styles.contentItem}>

<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>

<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />

</Animatable.View>

<Animatable.View animation="slideInLeft" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>

<Animatable.View animation="slideInRight" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>
</View>)
}else{
var content = <View style={styles.content}></View>
}

return (
<ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
@@ -167,112 +284,9 @@ render() {
<Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
<View style={styles.titleQrcodePlacehold}></View>
</ImageBackground>
</View>


<View style={styles.content}>

<Animatable.View animation="slideInDown" style={styles.contentItem}>

<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>

<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />

</Animatable.View>

<Animatable.View animation="slideInLeft" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>

<Animatable.View animation="slideInRight" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>
</View>
{content}

<View style={styles.bottom}>
<View style={styles.bottomLogoBackground}>


Yükleniyor…
İptal
Kaydet