鸿蒙开源组件——粒子脉冲效果

jacksky

发布于 2021-12-3 17:09

浏览

0收藏

ohos-Views

自定义组件

自定义组件-particles（粒子效果）
自定义组件- pulse（脉冲button效果）
自定义组件-progress（progress效果）
自定义组件- bottomnavigationbar（底部导航栏）

引用

方式一：通过library生成har包，添加har包到libs文件夹内在entry的gradle内添加如下代码

  implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])

方式二：

 allprojects{
           repositories{
               mavenCentral()
           }
   }

   implementation 'io.openharmony.tpc.thirdlib:ohos-views-bottom-navigation:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-particles:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-progress-bar:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-pulse-button:1.0.3'

自定义组件-particles（粒子效果）

   <com.onexeor.particlesview.ParticlesView
           ohos:id="$+id:particlesView"
           ohos:width="match_content"
           ohos:height="match_content"
           ohos:pv_background_color="#000000"
           ohos:pv_linking_line_color="#ffffff"
           ohos:pv_linking_line_width="0.5fp"
           ohos:pv_linking_nodes_distance="100fp"
           ohos:pv_nodes_color="#ffffff"
           ohos:pv_nodes_count="100"
           ohos:pv_nodes_size="2fp"
           ohos:pv_nodes_speed_max="10"
           ohos:pv_nodes_speed_min="1"
           ohos:pv_touchable="true"
           ohos:visibility="visible"
   />

自定义组件- pulse（脉冲button效果

  <io.singulart.pulse_button.PulseButton
              ohos:margin="50fp"
              ohos:id="$+id:pulseBtn"
              ohos:width="100fp"
              ohos:height="100fp"
              ohos:pb_color_center_circle_stroke="#21D9CC"
              ohos:pb_inner_circle_stroke_padding="7fp"
              ohos:pb_pulse_speed="200"
              ohos:pb_stroke_width_of_center_circle="1fp"
              ohos:pb_stroke_width_of_outer_circle="2fp"
              ohos:pb_wave_padding="20fp"
              ohos:visibility="visible"
  />

自定义组件-progress（progress效果

  <io.singulart.particle_progress_bar.ParticleProgressBar
              ohos:id="$+id:progress"
              ohos:width="80fp"
              ohos:height="80fp"
              ohos:layout_alignment="center"
              ohos:ppb_color="#ffffff"
              ohos:ppb_count_balls="8"
              ohos:ppb_enabled="true"
              ohos:visibility="visible"
  />

自定义组件- bottomnavigationbar（底部导航栏）

<io.singulart.bottomnavigationbar.CenterNavigationButton
              ohos:id="$+id:centerBtn"
              ohos:width="83fp"
              ohos:height="83fp"
              ohos:layout_alignment="bottom|horizontal_center"
              ohos:bottom_margin="38fp"
              ohos:cnb_background_color="#282B43"
              ohos:cnb_foreground_color="#21D9CC"
              ohos:cnb_foreground_color_normal="#666DA5"
              ohos:visibility="visible"
  />

  <io.singulart.bottomnavigationbar.BottomNavigationBar
              ohos:id="$+id:btn_ng"
              ohos:width="match_parent"
              ohos:height="70fp"
              ohos:bnb_background_color="#282B43"
              ohos:bnb_item_selected_color="#21D9CC"
              ohos:bnb_text_item_color="#666DA5"
              ohos:bnb_top_left_radius="$float:fp_50"
              ohos:bnb_top_right_radius="$float:fp_50"
              ohos:bnb_shadow_radius="0fp"
              ohos:bnb_center_btn="true"
              ohos:bnb_cutout_deep="$float:fp_46"
              ohos:bnb_cutout_bottom_offset="$float:fp_42"
              ohos:bnb_cutout_leftTop_radius="$float:fp_10"
              ohos:bnb_cutout_rightTop_radius="$float:fp_10"
              ohos:bnb_cutout_bottomLeft_radius="$float:fp_50"
              ohos:bnb_cutout_bottomRight_radius="$float:fp_50"
              ohos:bnb_text_item_size="$float:vp_14"
              ohos:btn_title="$string:button_text"
              ohos:layout_alignment="bottom"
              ohos:visibility="visible"
  />