1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { Log } from '../../utils/Log' 17import getStore from '../../redux/store' 18import { Action } from '../../redux/actions/Action' 19 20let localState = (state) => { 21 return { 22 xComponentWidth: state.PreviewReducer.xComponentWidth, 23 xComponentHeight: state.PreviewReducer.xComponentHeight, 24 } 25} 26 27let localDispatcher = (dispatch) => { 28 return { 29// updateOpacityValue: (opacityValue) => { 30// dispatch(Action.updateOpacityValue(opacityValue)) 31// }, 32 updateShowFlashBlackFlag: (flag: boolean) => { 33 dispatch(Action.updateShowFlashBlackFlag(flag)) 34 } 35 } 36} 37 38@Component 39export struct ShowFlashBlack { 40 private TAG: string = '[ShowFlashBlack]:' 41 42 @State state: any = {} 43 @State opacityValue: number = 1 44 45 aboutToAppear() { 46 Log.info(`${this.TAG} aboutToAppear E`) 47 getStore().connect(localState, localDispatcher)(this.state) 48 Log.info(`${this.TAG} aboutToAppear X`) 49 } 50 51 build() { 52 Flex({ direction: FlexDirection.Row }) { 53 Row() { 54 Shape() { 55 Rect() 56 .width(this.state.xComponentWidth) 57 .height(this.state.xComponentHeight) 58 } 59 .fill(Color.Black) 60 .opacity(this.opacityValue) 61 .onAppear(() => { 62 animateTo({ 63 duration: 50, 64 delay: 0, 65 onFinish: () => {} 66 }, () => {}) 67 animateTo({ 68 duration: 300, 69 curve: Curve.Sharp, 70 delay: 50, 71 onFinish: () => { 72 this.state.updateShowFlashBlackFlag(false) 73 this.opacityValue = 1 74 } 75 }, () => { 76 this.opacityValue = 0 77 }) 78 }) 79 } 80 } 81 .width(this.state.xComponentWidth) 82 .height(this.state.xComponentHeight) 83 } 84}