常用组件

1. animate.css:animate.style/

2. swiper swiperjs.com/swiper-api#…

import SwiperCore, { EffectFade } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.css'
import 'animate.css'

SwiperCore.use([EffectFade])

const [swiper, setSwiper] = useState(null)
const [activeIndex, setActiveIndex] = useState<number>(0)

return <Swiper
      onSwiper={setSwiper}
      onActiveIndexChange={(data) => setActiveIndex(data.activeIndex)}
    >
    
     <SwiperSlide>
        {(data) => {
          return (
            <div  className={`animate__animated ${
                  data.isActive ? 'animate__flipInY' : 'animate__flipInY'
                } `}>
                关注isActive
            </div>
          )
        }}
      </SwiperSlide>
      <button onClick={() => swiper.slideNext()}>next</button>
</Swiper>

3. AMap：参照高德地图 轨迹回放 lbs.amap.com/demo/javasc…

npm i @amap/amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = { securityJsCode: '密钥' }

// 加载地图 sdk
export const loadAMap = (): Promise<{ AMap: IAMap }> => {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '高德申请的key',
      version: '2.0',
      plugins: ['AMap.MoveAnimation'],
      AMapUI: {
        version: "1.1",
        plugins: [
                "/geo/DistrictCluster",
                "/misc/PointSimplifier",
                "/misc/PoiPicker",
        ],
      }
    })
      .then((AMap) => {
        resolve({
          AMap
        })
      })
      .catch((err) => {
        console.log('高德地图错误', err)
        reject(err)
      })
  })
}

// index.tsx

const initMap = useCallback(() => {
    const { AMap } = await loadAMap()
    // 轨迹回放的
    AMap.plugin('AMap.MoveAnimation', () => { })
    
    // 地图省市区
    const map = new AMap.Map("container", {
        center: new AMap.LngLat([108.5525, 34.3227]),
        zoom: 5,
    });
    AMapUI.load(["ui/geo/DistrictCluster", "ui/misc/PointSimplifier"], (DistrictCluster, PointSimplifier) => {
     // ...
    })
    
}, [])

useEffect(() => { initMap() }, [initMap])

4. 视频自动播放：new window.JSMpeg.Player

const mpegRef = useRef<HTMLCanvasElement>(null)
const mpegInsRef = useRef<any>(null)
useEffect(() => {
    if (mpegRef?.current && window.JSMpeg) {
      mpegInsRef.current = new window.JSMpeg.Player('1.ts', {
        canvas: mpegRef.current,
        ...//一些参数
      })

      mpegInsRef.current.play()
    }

    return () => {
      mpegInstanceRef.current?.destroy()
    }
  }, [])

 return <canvas ref={mpegRef} />