react

2022年01月22日 21:47
//https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner
//import * as React from 'react';
import React, { Component, useState } from 'react';
//import styles from './style.css' assert { type: 'css' };
 import './Jairopop.css';

 type colorType = 'yellow' ' 'red' ' 'blue';

 interface JairopopProps {
   // ? is optional props.
  label?: string,
  color?: colorType,
  isHide?: boolean
}

 const Jairopop =(props: JairopopProps): JSX.Element => {
   let classStr  = "balloon";
   classStr += ' ' + props.color;
   if (props.isHide) {
    classStr += ' hide';
   } else {
    classStr.replace( / hide/g , '' ) ;
   }

  return (
    <span style = {{display : 'inline-block', height : '150px'}}>
      <div className = {classStr} >
        <div>
        {props.label}°
        </div>
      </div>
    </span>  
  )
 }

 /*
interface State {}
class Jairopop extends React.Component<Props, State> {
  render() {
    let className;
    if (this.props.color) {
      className = this.props.color + " balloon";
    }
    return (
      <div className={className}>
        {this.props.name}さん。こんにちは。
      </div>
    );
  }
};*/

export default Jairopop;//https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner
//import * as React from 'react';
import React, { Component, useState, useRef } from 'react';
//import styles from './style.css' assert { type: 'css' };
 import './Jairopop.css';
 import { Animated, Button, Text, StyleSheet, View} from 'react-native';

 type colorType = 'yellow' ' 'red' ' 'blue';

 interface JairopopProps {
   // ? is optional props.
  label?: string,
  color?: colorType,
  isHide?: boolean
}

 const Jairopop =(props: JairopopProps): JSX.Element => {

  const fadeAnim = useRef(new Animated.Value(0)).current;
  const fadeAnim2 = useRef(new Animated.Value(0)).current;
  const fadeIn = () => {
    // Will change fadeAnim value to 1 in 5 seconds
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      //easing: v => v,
      useNativeDriver: true
    }).start();

    Animated.spring(fadeAnim2, {
      toValue: 1,
      friction: 7,
      tension : 40,
      useNativeDriver: true
    }).start();
  };
  const animatedStyle = {
    transform: [{ scale : fadeAnim2 }],
  }

   let classStr  = "balloon";
   classStr += ' ' + props.color;
   if (props.isHide) {
    classStr += ' hide';
   } else {
    classStr.replace( / hide/g , '' ) ;
   }

  return (
    <View>
    <Animated.View style={[{opacity: fadeAnim}]}>
    <Animated.Text style={[animatedStyle]}>text</Animated.Text>
      <div className = {classStr} >
        <div>
        {props.label}°
        </div>
      </div>
    </Animated.View>
    <Button title="Fade In View" onPress={fadeIn} />
    </View>
  )
 }

 /*
interface State {}
class Jairopop extends React.Component<Props, State> {
  render() {
    let className;
    if (this.props.color) {
      className = this.props.color + " balloon";
    }
    return (
      <div className={className}>
        {this.props.name}さん。こんにちは。
      </div>
    );
  }
};*/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  fadingContainer: {
    padding: 20,
    backgroundColor: "powderblue"
  },
  fadingText: {
    fontSize: 28
  },
  buttonRow: {
    flexBasis: 100,
    justifyContent: "space-evenly",
    marginVertical: 16
  }
});
export default Jairopop;


/* https://saruwakakun.com/html-css/reference/speech-bubble */
.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: blue;
  border-radius: 50%;
  box-sizing: border-box;
  animation: poyoyon 0.3s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
.yellow.balloon {
  background: yellow;
}
.red.balloon {
  background: red;
}
.balloon:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid blue;
  z-index: 0;
}
.blue.balloon:before {
  border-top: 15px solid blue;
}
.yellow.balloon:before {
  border-top: 15px solid yellow;
}
.red.balloon:before {
  border-top: 15px solid red;
}
.hide { /* animationの再起動はvisibility:hiddenではなく,display:noneでできる */
  display: none;
}
@keyframes poyoyon {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
  }  
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  65% {
    transform: translateY(30px);
  }
  85% {
    transform: translateY(0px);
    transform: translateX(-5px);
  }
  90% {
    transform: translateY(10px);
    transform: translateX(5px);
  }
  100% {
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}
戻る